为什么"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>

我发现适用text-align: center于img直接不起作用.

这是否意味着div当需要居中图像时必须将其包裹在空？

有一个更好的方法吗？

Answer 1

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

没有内容内的图像.

你可以:

• 使图像显示为块,然后使用自动边距
• 把它放在任何块元素中(它不必是div,但如果你只是居中它,那通常是最明智的选择)并在该容器上设置text-align.

Answer 2

text-align: center将其应用到的容器的内联内容水平居中。所以是的，要在容器（块布局）内居中图像（内联布局），您应该将此 css 应用于容器，而不是图像。