1.7 KiB
1.7 KiB
| title | localeTitle |
|---|---|
| Center an Image Using Text Align Center | 使用文本对齐中心居中图像 |
使用文本对齐中心居中图像
<img>元素是内联元素（ inline-block显示值）。它可以通过添加text-align: center;轻松居中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>
演示： Codepen