2

我的问题如下：

我已经垂直居中一个div。但是，我想将另一个 div 水平居中。问题是我无法将其水平居中。

这是我的 (X)HTML 和 CSS

(X)HTML：

<body>
<div id="strut"></div>
<div id="page">
    <div id="inner_page">
        <h1>Galidie "jQzz" Clément</h1>
    </div>
</div>

CSS：

html, body {
margin: 0;
padding: 0;
height: 100%;
}

#strut, #page {
    display: inline-block;
    vertical-align: middle;
}

#strut {
    height: 100%;
}

#page {
    border: 1px solid #c00;
}

#inner_page {
    width: 750px;
    margin: 0 auto;
    background-color: #c00;
}

h1 {
    text-align: center;
    margin: 0;
}

strut 是垂直居中元素的标记。页面垂直居中。这个想法是尝试将 inner_page 块水平居中。

我应该使用绝对位置吗？还是别的什么？我选择了好的方法吗？

4

1 回答 1

0

#page是内联块，所以它总是占据它的孩子的尺寸。在这种情况下，它唯一的孩子是#inner_page750px，所以它们的大小相同。这意味着你不能真正把它放在里面#page。

例如，您可以#page通过穿上来使自己text-align: center居中body。

于 2012-10-19T22:58:52.700 回答