2.5 KiB
2.5 KiB
title | localeTitle |
---|---|
Center an Image Using Text Align Center | Центрировать изображение с помощью центра выравнивания текста |
Центрировать изображение с помощью центра выравнивания текста
Элемент <img>
- это встроенный элемент (отображаемое значение inline-block
). Его можно легко центрировать, добавив text-align: center;
Свойство CSS для родительского элемента который содержит его.
Чтобы text-align: center;
изображение с помощью text-align: center;
вы должны поместить <img>
внутри элемента уровня блока, такого как div
. Поскольку свойство text-align
применимо только к элементам уровня блока, вы размещаете text-align: center;
на элементе уровня блока упаковки, чтобы достичь горизонтально-центрированного <img>
.
пример
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
}
</style>
</head>
<body>
<div class="img-container"> <!-- Block parent element -->
<img src="user.png" alt="John Doe">
</div>
</body>
</html>
Примечание . Родительский элемент должен быть блочным элементом. Если это не элемент блока, вы должны добавить display: block;
CSS и свойство text-align
.
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
display: block;
}
</style>
</head>
<body>
<span class="img-container"> <!-- Inline parent element -->
<img src="user.png" alt="">
</span>
</body>
</html>