Как центрировать изображение с помощью выравнивания текста: по центру

Элемент представляет собой встроенный элемент (дисплей значение 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-positionсвойством, чтобы получить больший контроль над отображением мультимедиа.

В основном мы используем это object-fitсвойство, чтобы определить, как растягивать или сжимать встроенный носитель.

Синтаксис

.element 

Ценности

  • fill: Это значение по умолчанию . Измените размер содержимого, чтобы оно соответствовало его родительскому блоку, независимо от соотношения сторон.
  • contain: Изменить размер содержимого, чтобы заполнить его родительский блок с правильным соотношением сторон.
  • cover: аналогично, containно часто обрезает содержимое.
  • none: отображение изображения в исходном размере.
  • scale-down: сравните разницу между noneи, containчтобы найти наименьший размер конкретного объекта.

Совместимость с браузером

object-fitПоддерживается большинством современных браузеров, для самой последней информации о совместимости вы можете проверить это //caniuse.com/#search=object-fit.

Документация

  • выравнивание текста - MDN
  • объектно-подходящий - MDN
  • - MDN