html - 如何使用边距使容器居中：自动

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工作？

score 1 · Accepted Answer

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

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

使用text-align:center._

替代 jsFiddle ..我不知道你想要实现什么风格。

score 1 · Accepted Answer

div将#title扩展以填充其父级，#header而后者又扩展以填充其自己的父级，#background其宽度至少为 960 像素。

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

如果你想#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;
}

2 回答 2