Как да центрирате изображение с помощта на подравняване на текст: Център

Програмиране

Един елемент е вграден елемент (дисплей стойност 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