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>