为什么我不能将此图片置于 div 的中心？

Question

我试图将图像置于 div 的中心，但它似乎粘在了右边。

这是我的 divs:

<div align="left" style="display:inline-block;">
    <div style="width:210px;">
        <img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
    </div>
</div>

这是它的样子：

我该如何解决这个问题？

Answer 1

img 标签默认是 inline 所以你所要做的就是在它的父标签上调用 text-align: center:

<div style="display:inline-block;">
  <div style="width:210px;text-align: center;">
    <img src="res/img/TopAd.png" style="padding:10px 0;">
  </div>
</div>

其他一些注意事项：

您可以删除 align="left"，HTML5 不支持。
您也可以删除 top: -100px，因为 top、left、right 和 bottom 属性在设置元素之前不起作用fixed、absolute 或 relative。
这一行: padding: 10 0 10 0; 是缺失的 px 添加到它并且可以压缩到 padding: 10px 0; 是顶部和底部。

更新

如果你只想将所有这些放在页面中间，你可以将 text-align: center 添加到 body，但我建议删除第一个 div 并添加 margin:auto 到具有定义宽度的第二个：

<div style="width:210px;text-align: center; margin: auto;">
   <img src="http://www.placecage.com/200/400" style="padding:10px 0;"/>
</div>

FIDDLE

Answer 2

<div align="left"

align 属性已在 HTML4 中弃用。使用 style="text-align: left;" 而不是 align="left".

padding:10 0 10 0;

10个什么？你缺少单位。您可能需要 10px 像素：

padding:10px 0 10px 0;

我在其中没有看到任何代码，甚至看起来像是在尝试使图像居中。在图像应居中的容器上尝试 text-align: center。

<div style="display:inline-block;">
    <div style="width:210px; text-align: center; border: 1px solid #ccc;">
        <img src="http://placecage.com/160/160" style="padding: 10px 0 10px 0;" />
    </div>
</div>

Answer 3

<div align="left" style="display:inline-block;">
    <div style="width:210px; vertical-align:middle; text-align:center">
        <img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
    </div>
</div>

Answer 4

下面的代码将完成任务。

<div align="left" style="display:inline-block;">
    <div style="width:210px;" align="center">
    <img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>

为什么我不能将此图片置于 div 的中心？

Why can't I center this image within the div?

html

css