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-align
vlastnosť 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-align
vlastnosť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-fit
vlastní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-position
vlastnosťou na získanie väčšej kontroly nad zobrazením média.
object-fit
Vlastnosť 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,contain
ale často orezávanie obsahu.none
: zobraziť obrázok v pôvodnej veľkosti.scale-down
: porovnajte rozdiel medzinone
acontain
nájdite najmenšiu konkrétnu veľkosť objektu.
Kompatibilita prehliadača
Je object-fit
podporovaný 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