Як центрувати зображення за допомогою вирівнювання тексту: Центр

Програмування

Елемент являє собою вбудований елемент (дисплей значення 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