Question

我需要让图片div始终以页面为中心这是目前的结构。

HOLDER DIV
（位置：绝对;宽度：100％;）
第二次DIV
（位置：相对;宽度：2272px;边距：0自动;）
图片分区
（浮动：左）

如果第二个div小于1000px宽，这个代码有效，但我需要它是2272.有谁知道如何解决这个问题或以另一种方式绕过它？

感谢

修改好的，这是我想要做的更多。该网站的宽度为960px。然后我上面提到的div结构通过z-index进入网站下方。这两张照片需要在主站点的两侧，一个在左侧，一个在右侧。所以2272的宽度是2张图片和960填充的位置。这是该网站的图片 http://cb.seddonmedia.com/RobertHillPhotography-Home-2.jpg

Answer 1

尝试 - http://jsfiddle.net/q5WwW/。

position: relative;
    left: 50%;
margin-left: -1136px;

Answer 2

只有当所选元素小于其容器的总宽度时，css margin: 0 auto;才有效。

为什么你需要第二个div为2272px宽？

如果你试图将背景图像居中对齐（我最好猜测你要做什么），你最好通过css应用图像并使用background-position: center center来获取它居中。

以下是css background property的更多信息。

Answer 3

如果您不受要求通过z索引将图片放在内容后面的限制，您可以使用3列CSS布局来解决这个问题吗？

#top{
clear: both;
padding: 1px;
}
#left{
float: left;
width: 656px;
}
#right{
float: right;
width: 656px;
}
#middle{
padding: 0px 656px 0px 656px;
width: 960px;
}
#bottom{
clear: both;
}

HTML在概念中看起来像这样：

<body>
    <div id="top">TOP</div>
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
    <div id="middle">MIDDLE</div>
    <div id="bottom">BOTTOM</div>
</body>

还有其他方法可以在CSS中执行3列： The Perfect 3 Column Liquid Layout (Percentage widths) 要么 3 Column CSS Layout: Fixed Width And Centered

Answer 4

另外，在html中你可以说： <center> <div></div> </center>

需要将3个对象对齐到屏幕中心

4 个答案: