Question

首先，请原谅我的无知，近14年来我没有玩HTML，我正在努力熟悉新的标准和修订版。我有一个我正在尝试的布局，我的容器块元素似乎没有绝对水平居中。不幸的是，我不知道为什么会这样，我希望你们中的一个能够找出错误，或者解释为什么会发生这种情况。

谢谢！

HTML

<!DOCTYPE HTML>

<div class="container">

    <div id="contentMain">

        <div class="titleBar">
            <p>Main Content Title Element @ 960px</p>
        </div>

        <div class="containerContent">
            <p>Main Content Area Element</p>
        </div>

    </div>

</div>

CSS

.container {
    margin-left:auto;
    margin-right:auto;
    background-color:#F00;
    min-width:996px;
    width:2px;
}

.containerContent {
    padding:4px;
}

.titleBar {
    padding:4px;
}

#contentMain {
    margin-top:2px;
    margin-bottom:4px;
    margin-left:4px;
    margin-right:4px;
    border:1px dashed #000;
    background-color:#FFF;
    float:left;
    width:960px;
    height:200px;
    clear:both;
}

p {
    padding:0px;
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}

Answer 1

使用display: inline-block和text-align: center

，您可以采取哪些措施来确定儿童div的中心位置

为父div text-align: center和子div display: inline-block。

http://jsfiddle.net/nS6tL/

HTML

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

CSS

.container{
    float: left;
    width: 100%;
    border: 1px solid blue;
    text-align: center;
}

.block{
    width: 30%;
    display: inline-block;
    height: 300px;
    border: 1px solid red;
}

Answer 2

您的.container div完全居中，但其内容并未填满整个宽度。

看看这个小提琴：http://jsfiddle.net/74ngf/5/

如您所见，容器有一个红色背景，超出其内容。要解决此问题，您需要手动获取内容的宽度，例如：

#contentMain {
    margin-top:2px;
    margin-bottom:4px;
    margin-left:4px;
    margin-right:4px;
    border:1px dashed #000;
    background-color:#FFF;
    float:left;
    width:986px; /* this is the important part */
    height:200px;
    clear:both;
}

（更新小提琴：http://jsfiddle.net/74ngf/8/）

986px来自哪里？

容器的宽度为996px。 #contentMain的左右边距为4px，两边的边框宽度为1px。如果它应该水平填充容器，那么它必须具有(996 - 2*4 - 2*1) px的宽度986px。

或者你可以考虑使用不同的布局方法，正如Chanckjh所说的那样。

Answer 3

如果您的容器宽度是固定的，您可以使用margin-left:auto; margin-right:auto;通过简单的方法对您的div进行居中

<div class="container">
    Text and container both are center align
</div>


.container {
    width:80%;
    margin:0px auto;
    text-align:center;
    border:1px solid #ccc;
    height:150px;
}

JsFiddle

居中的<div>并不完全是中心，为什么？</div>

3 个答案: