Ako vycentrovať obrázok pomocou zarovnania textu: Vycentrovať

Prvok je inline prvok (zobrazenie hodnoty inline-block). Dá sa ľahko vycentrovať pridaním vlastnosti text-align: center;CSS k nadradenému prvku, ktorý ju obsahuje.

Ak chcete vycentrovať obrázok pomocou text-align: center;, musíte umiestniť vnútro prvku na úrovni bloku, napríklad a div. Pretože sa táto text-alignvlastnosť vzťahuje iba na prvky na úrovni bloku, umiestnite ho text-align: center;na ovíjajúci prvok na úrovni bloku, aby ste dosiahli vodorovne vycentrovaný .

Príklad

   Center an Image using text align center  .img-container { text-align: center; }

Poznámka: Nadradeným prvkom musí byť blokový prvok. Ak nejde o blokový prvok, mali by stedisplay: block;spolu s toutotext-alignvlastnosťoupridaťvlastnosť CSS.

   Center an Image using text align center  .img-container { text-align: center; display: block; }

Demo: Codepen

Objekt fit

Po vycentrovaní obrázka ho možno budete chcieť zmeniť jeho veľkosť. K object-fitvlastníctva určuje, ako nejaký prvok reaguje na šírku / výšku je to materskej krabice.

Túto vlastnosť je možné použiť pre obrázok, video alebo akékoľvek iné médium. Môže sa tiež použiť s touto object-positionvlastnosťou na získanie väčšej kontroly nad zobrazením média.

object-fitVlastnosť v zásade používame na definovanie toho, ako rozťahuje alebo pretláča vložené médium.

Syntax

.element

Hodnoty

  • fill: Toto je predvolená hodnota . Zmeňte veľkosť obsahu tak, aby sa zhodoval s jeho nadradeným rámčekom, bez ohľadu na pomer strán.
  • contain: Zmeniť veľkosť obsahu tak, aby vyplnil svoje nadradené políčko, so správnym pomerom strán.
  • cover: podobné ako, containale často orezávanie obsahu.
  • none: zobraziť obrázok v pôvodnej veľkosti.
  • scale-down: porovnajte rozdiel medzi nonea containnájdite najmenšiu konkrétnu veľkosť objektu.

Kompatibilita prehliadača

Je object-fitpodporovaný väčšinou moderných prehľadávačov. Najaktuálnejšie informácie o kompatibilite nájdete tu //caniuse.com/#search=object-fit.

Dokumentácia

  • zarovnanie textu - MDN
  • objekt-fit - MDN
  • - MDN