62 lines
2.5 KiB
Markdown
62 lines
2.5 KiB
Markdown
|
---
|
|||
|
|
title: Center an Image Using Text Align Center
|
|||
|
|
localeTitle: Центрировать изображение с помощью центра выравнивания текста
|
|||
|
|
---
|
|||
|
|
## Центрировать изображение с помощью центра выравнивания текста
|
|||
|
|
|
|||
|
|
Элемент `<img>` - это встроенный элемент (отображаемое значение `inline-block` ). Его можно легко центрировать, добавив `text-align: center;` Свойство CSS для родительского элемента который содержит его.
|
|||
|
|
|
|||
|
|
Чтобы `text-align: center;` изображение с помощью `text-align: center;` вы должны поместить `<img>` внутри элемента уровня блока, такого как `div` . Поскольку свойство `text-align` применимо только к элементам уровня блока, вы размещаете `text-align: center;` на элементе уровня блока упаковки, чтобы достичь горизонтально-центрированного `<img>` .
|
|||
|
|
|
|||
|
|
### пример
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<!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` .
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<!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>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Демо-** [версия](https://codepen.io/aravindio/pen/PJMXbp) **:** [Codepen](https://codepen.io/aravindio/pen/PJMXbp)
|
|||
|
|
|
|||
|
|
## Документация
|
|||
|
|
|
|||
|
|
[**text-align** - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
|
|||
|
|
|
|||
|
|
[**\\ ** - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
|