为什么我不能将这个图像置于div中？

Question

我试图将我的图像放在div中，但它似乎粘在右边。

以下是我的div：

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

其他几点说明：

1. 您可以删除HTML5中不支持的align="left"。
2. 您还可以删除top: -100px，因为top，left，right和bottom属性不起作用，除非将元素设置为{ {1}}，fixed或absolute。
3. 此行：relative缺少padding: 10 0 10 0;，但可以将其缩小为px（顶部和底部）。

<强>更新

如果您想将所有这些放在页面中间，可以将padding: 10px 0;添加到text-align: center，但我建议删除第一个body并添加{{1到具有定义宽度的第二个：

div

FIDDLE

Answer 2

<div align="left"

HTML4中不推荐使用align属性。使用style="text-align: left;"代替align="left"。

padding:10 0 10 0;

10什么？你错过了单位。你可能想要10px像素：

padding:10px 0 10px 0;

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>