Question

我的问题如下：

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

（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块水平居中。

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

Answer 1

#page是内联块，因此它将始终占用其子项的维度。在这种情况下，它唯一的子节点是#inner_page，它是750px，所以它们都是相同的大小。这意味着您无法将其集中在#page内。

您可以将#page置于text-align: center上，以body为中心。

垂直和水平对齐

1 个答案: