Question

我的网站有一个以#content和margin-left: auto为中心的900px div margin-right: auto。我有一个我需要在div后面显示的图像，它将部分重叠#content。

图像设置为当前显示为块，我可以将其显示到需要的位置，但不允许#content绘制图像。我可以#content使用position: absolute显示图像，但是这样可以防止使用margin-left / margin-right自动居中。

我目前的定位是：它需要的地方是：

img#watermark  
{
    margin-left: auto;  
    margin-right: auto;
    display: block;
    padding-left: 900px;
}

#content只需要出现在水印上。

非常感谢。

Answer 1

<强> HTML：

<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>

<强>的CSS：

div {
    margin:auto;
    width: 512px;
    height: 512px;
    background: rgba(0,0,0,.4);
    position: relative;
}
img {
    position: absolute;
    left: 50%;
    margin-left:-256px;
}

http://jsfiddle.net/Db2cw/

Answer 2

解决方案是在#content div上有一个周围的div，并且该surroinding div绝对定位并具有定义的宽度和高度。

例如：

HTML：

<div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>

CSS：

#outter {
width: 1000px;
height: 300px;
position: relative;
}

#image {
width: 1000px;
height: 300px;
position: absolute;
}

#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}

#content {
margin: 0 auto;
width: 900px;
}

此处示例：http://jsfiddle.net/qwEhv/

Answer 3

“我可以通过位置显示#content在图像上显示：绝对但这可以防止使用margin-left / margin-right自动居中。”

你可能需要做的就是有一个额外的div - 例如把它称为#contentWrapper并使用margin-left和right将它居中，将position设置为relative。将div #content放在包装器div中并定位绝对值。这应该允许你使#content看起来居中。

将图像定位在居中的div后面

3 个答案: