Question

为什么下面的div不居中？

<div align="center" style="width: 980px; height: 202px; top: 0px; position: absolute;">
<div style="width: 235px; position: relative; z-index: 1;"><a href="index.php"><img border="0" src="images/logo.png" alt="" /></a></div>
</div>

我尝试了很多不同的CSS样式，但由于某种原因，这个div不在页面的中心。

Answer 1

margin: auto将固定宽度的块元素居中：

<div style="width: 980px; height: 202px; margin: auto">
    <div style="width: 235px">
        <a href="index.php"><img src="images/logo.png" style="border: none;"/></a>
    </div>
</div>

我认为它不适用于绝对定位的元素，但我怀疑在你的例子中它需要以这种方式定位。

Answer 2

#wrapper {
    position:absolute;
    top:10px;
    left:50%;
    width:800px;
    margin:0px auto 0px -400px;
}

如果你想以页面为中心...... 使这项工作的原因是你设置一个负值，左边距等于div宽度的1/2

Answer 3

因为您将其设置为：

position: absolute; top:0px;

这将使其显示在其父级locate-div的左上角。

为什么我的DIV不居中？

3 个答案: