Question

出于某种原因，margin:auto无效。

HTML

<body>
    <div id="background">
        <div id="header">
            <div id="title">Welcome</div>
        </div>
    </div>
</body>

CSS

#background {
    min-width: 960px;
}

#title {
    display: block;
    margin: auto;
    background-color: blue;
}

这只是在屏幕顶部画一条蓝线，左边是“欢迎”字样。我margin:auto为什么不工作？

Answer 1

通过边距水平居中的正确语法是：margin: 0px auto;，因为这会将左右边距设置为自动。如果使用此方法，则需要在其上设置宽度，因为默认情况下宽度为100％。

或者，如果您只是居中文本，也可以使用text-align:center。

Working jsFiddle使用text-align:center。

Alternative jsFiddle..我不知道你想要达到什么样的风格。

Answer 2

#title div将展开以填充其父级#header，而父级#background会扩展以填充其自己的父级#title，其宽度至少为960px。 / p>

因此，#title如果是全宽，则它居中，默认情况下，文本左对齐（至少在西欧语言中）。

如果您希望display: inline-block具有缩小到适合的宽度，可以尝试#title。

要水平居中text-align: center，请将#header添加到其父容器#background { min-width: 960px; } #header { text-align: center; } #title { display: inline-block; background-color: beige; }。

例如：

display: table

或者，您可以使用.ex2 #header { text-align: left; } .ex2 #title { display: table; margin: 0 auto; background-color: beige; }：

获得相同的结果

{{1}}

请参阅演示：http://jsfiddle.net/audetwebdesign/kAhnx/

如何使用保证金集中容器：auto

2 个答案: