html - 为什么 "text-align:center"对 "div"有效，但对 "img"无效？

Question

这是一个例子:

p, span, div,img {
    text-align: center;
}

<p>Para</p>
<span>Span</span>
<div>Div</div>
<img src="https://www.google.com/images/nav_logo195.png" />
<div><img src="https://www.google.com/images/nav_logo195.png" /></div>

我发现直接在 img 上应用 text-align:center 不起作用。

这是否意味着当需要居中图像时它必须被包裹在一个空的 div 中？

有更好的方法吗？

Answer 1

text-align 对齐应用它的元素内的文本(和其他内联)内容。

图像内没有内容。

您可以:

• 将图像显示为 block ，然后使用自动边距
• 将它放在任何 block 元素内(它不一定是 div，但如果您只是将它居中，这通常是最明智的选择)并在该容器上设置文本对齐。