Question

以下是一个例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我发现申请text-align: center img直接无法正常工作。

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

有更好的方法吗？

Answer 1

text-align将文本（和其他内联）内容对齐到应用它的元素内。

内部没有内容。

你可以：

使图像显示为块，然后使用自动边距

把它放在任何块元素中（它不必是div，但如果你只是居中它，那通常是最明智的选择）并在该容器上设置text-align。

Answer 2

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

Answer 3

如果你想使用img中心：

{{1}}

Answer 4

不要在img标记上使用text-align，而是在div

上使用它

＆＃13;

p, span, div,img {
    text-align: center;
}
#testimg {
  width:100%;
  position:absolute;
  overflow:auto;
  top:50px;
  height: 100%;
  }

＆＃13;

<div id="testimg">
   <img src="https://www.google.com/images/nav_logo195.png" />
</div>

＆＃13;

为什么＆＃34; text-align：center＆＃34;为＆＃34; div＆＃34;工作但不适合＆＃34; img＆＃34;？

4 个答案: