Един
елемент е вграден елемент (дисплей стойност inline-block
). Той може лесно да бъде центриран чрез добавяне на text-align: center;
CSS свойството към родителския елемент, който го съдържа.
За да центрирате изображение с помощта text-align: center;
, трябва да поставите
вътрешността на елемент на ниво блок, като например div
. Тъй като text-align
свойството се отнася само за елементи на ниво блок, вие поставяте text-align: center;
върху елемента за опаковане на ниво блок, за да постигнете хоризонтално центрирано
.
Пример
Center an Image using text align center .img-container { text-align: center; }
Забележка: Родителският елемент трябва да е блоков елемент. Ако не е блоков елемент, трябва да добавитеdisplay: block;
CSS свойство заедно съсtext-align
свойството.
Center an Image using text align center .img-container { text-align: center; display: block; }
Демонстрация: Codepen
Object Fit
След като изображението ви е центрирано, може да искате да го преоразмерите. На object-fit
уточнява собственост как елемент отговаря на ширина / височина на родител кутия е всичко.
Това свойство може да се използва за изображения, видео или всякакви други носители. Той може да се използва и със object-position
свойството, за да получите повече контрол върху начина на показване на носителя.
По принцип използваме object-fit
свойството, за да определим как той разтяга или мачка вграден носител.
Синтаксис
.element
Стойности
fill
: Това е стойността по подразбиране . Преоразмерете съдържанието, за да съответства на родителското поле, независимо от пропорциите.contain
: Преоразмерете съдържанието, за да запълните родителското му поле, като използвате правилното съотношение.cover
: подобно на,contain
но често изрязване на съдържанието.none
: показва изображението в оригиналния му размер.scale-down
: сравнете разликата междуnone
и, заcontain
да намерите най-малкия конкретен размер на обекта.
Съвместимост на браузъра
Поддържа object-fit
се от повечето съвременни браузъри, за най-актуална информация за съвместимост можете да проверите това //caniuse.com/#search=object-fit.
Документация
- подравняване на текст - MDN
- обект - MDN
- MDN