使用文本对齐中心居中图像? [英] Center image using text-align center?

问题描述

属性 text-align: center; 是使用 CSS 将图像居中的好方法吗?

img {文本对齐:居中；}

解决方案

这将不起作用，因为 text-align 属性适用于块容器，不适用于内联元素和 img 是一个内联元素.请参阅W3C 规范.

改用这个:

img.center {显示:块；边距:0 自动；}

<div style="border: 1px solid black;"><img class="center" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

Is the property text-align: center; a good way to center an image using CSS?

img {
    text-align: center;
}

解决方案

That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element. See the W3C specification.

Use this instead:

img.center {
    display: block;
    margin: 0 auto;
}

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

这篇关于使用文本对齐中心居中图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！