在div上面放置一个图像

我有一个div，里面有一堆东西，我想要做的就是在其上放置一个图像，居中放置。我的基本布局看起来是这样的：在div上面放置一个图像

<div> 
    <img style="display:block; position: absolute; top:50%; left:50%; margin-top:-33px; margin-left:-33px;" src="Images/ajax-loader_001.gif" /> 
    <!-- a bunch of tables and stuff that doesn't have a conveniently fixed size --> 
</div>

以上将集中在屏幕上的图像（图像是66px X 66px BTW），但我想它的中心相对于父DIV和它上面的“浮动” 。有没有纯粹的CSS方式来做到这一点？需要在IE8和最近的Firefox版本中工作。

编辑：只是为了澄清 - 我正在寻找中心都水平和垂直，并在父母的顶部。

来源

2012-03-14 Matt Burland

你需要把'position：relative;'放在你父母的div上 – 2012-03-14 19:42:16

@Scott：该死的。谢谢。如果你想让它成为答案，我会接受它。 – 2012-03-14 19:48:17

只是需要把这个在您的父母DIV：

position: relative;

来源

2012-03-14 19:50:14

你应该删除所有绝对定位的东西，而不是这样做 img {display：block; margin：0 auto; }

来源

2012-03-14 19:45:25

需要绝对位置才能将其从文档流中取出并显示在其他元素上方。另外我想垂直居中以及水平居中。我会编辑这个问题来澄清这一点。 – 2012-03-14 19:50:17

您可以使用：

<div> 
    <img style="display:block; position: relative; margin:auto" src="Images/ajax-loader_001.gif" /> 
    <!-- a bunch of tables and stuff that doesn't have a conveniently fixed size --> 
</div>

这将肯定工作。

来源

2012-12-20 15:27:32

在div上面放置一个图像

回答

相关问题