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