0

我有一个 CSS 元素，它应该是 1000 像素的固定宽度。这是我的CSS代码：

#content
{
    margin:auto;
    background-color:#DDDDDD;
    position:absolute;
    top:110px;
    width:1000px;
}

Tis 完美地设置了宽度、位置和颜色，但它总是向左对齐。我希望整个文本块与中心对齐。我尝试使用 HTML 来做到这一点：

<div id="content" align="center">
Some test content
</div>

但是，这只会对齐元素内部的文本，而不是元素本身。这是它的样子：

http://gyazo.com/b44a28edfecb9cbfc3a5afe93fa08d8a

非常感谢任何将其与中心对齐的帮助。提前致谢！

4

4 回答 4

1

移除position:absolute;以使其水平居中。

我看不到你的大部分 html 结构。如果您的垂直位置受此影响，请尝试更改margin:auto为：

margin: 110px auto 0;或者margin: 0 auto

于 2013-06-03T21:46:01.317 回答
1

您应该div改为使用 css 居中。

像这样的东西：

#content
{
background-color:#DDDDDD;
width:1000px;
margin: 110px auto; /*center the element and set top margin to 110px*/
}

<div id="content">
Some test content
</div>
于 2013-06-03T21:54:24.950 回答
0

如果你想从一个绝对位置居中一个元素，这个仍然应该在静态上下文中。例如：http: //jsfiddle.net/GCyrillus/bNFd5/

.absolute {
    position:absolute;
    left:0;
    width:100%;
}
.center {
    width:500px;
    margin:auto;
    border:solid;
}
.static {
    padding-top:5em;
}
于 2013-06-03T21:54:10.627 回答
0 
<!DOCTYPE>
<html>
    <head>
        <style>
            #content{
                background-color:#DDDDDD;
                width:1000px;
            margin: 0 auto;
            }
            #wrapper{
            width: 1300px;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content" align="center">Some test content</div>
        </div>
    </body>
</html>
于 2013-06-03T22:19:35.583 回答