为什么我不能把这个图像放在div的中间？

我试图把我的图像放在div的中间，但它看起来像是粘在了右边。为什么我不能把这个图像放在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>

这是什么样子：

image in div

我该如何解决这个问题？

来源

2015-01-02 Zach Gates

尝试左：50％！或显示：块;保证金：汽车; –

关于哪个元素？ @ZeRuBuES –

你的图片elem –

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因为除非元素被设置为fixed，absolute或relative的top，left，right和bottom性能不起作用。
此线路：padding: 10 0 10 0;缺少px添加到它，可以浓缩到padding: 10px 0;这是顶部和底部。

UPDATE

，如果你只想中心所有这一切都在页面的中间，你可以添加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

来源

2015-01-02 03:58:08 jmore009

这不适合我。 –

很难说这个问题实际上是什么，因为从这个代码中没有什么可以集中。如果你只是想把所有这些放在页面中间，那么设置'body {text-align：center}' – jmore009

@zachgates你能解释一下应该发生什么吗？看起来，这似乎并不明确，因为它似乎是 – jmore009

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

来源

2015-01-02 04:01:42 gilly3

这对我也不起作用。 –

@zachgates - 我已经添加了一个演示以div为中心的图像的代码片段。请编辑您的问题，包括足够的代码来重现您遇到的问题。重现您问题的代码片段非常理想。 – gilly3

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

来源

2015-01-02 04:03:36 Lucifer

下面的代码将做任务。

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

来源

2015-01-02 04:08:53 MegaMind

为什么我不能把这个图像放在div的中间？

回答

相关问题