Question

我正在尝试将<ul>置于页面中间位置。为此，我使用保证金：0 auto;属性。但是，它不起作用。有什么想法吗？

HTML

<body>

<header id="navHead">
    <div id="nav">
        <ul id="navLinks">
            <li>Home</li>
            <li>About Me</li>
            <li>Assignments</li>
        </ul>
    </div>
</header>

</body>

这是CSS

#navLinks {
    list-style: none;
    display: inline-flex;
    margin: 0px auto;
}

#nav li {
    margin-right: 20px;
}

#navHead {
    width: 100%;
    height: 12%;
    padding: 25px 0px;
    margin: 0px auto;
    background: red;

}

#nav {
    width: 100%;
    margin: 
}

jsfiddle

Answer 1

由于ul更改为内联元素，因此它不会考虑边距值auto。你可以使它成为块级元素，并在其上设置宽度，但这对于动态变化宽度的内容不起作用。

在您的情况下，只需将text-align:center添加到父元素即可。它有效，因为ul是内联的。

Example

#nav {
    width: 100%;
    text-align:center;
}

或者，您也可以将父元素的显示更改为table。这样做，margin:auto将起作用。只需让孩子li元素inline-block。

Example

#navLinks {
    list-style: none;
    display: table;
    margin: 0px auto;
}
#nav li {
    margin-right: 20px;
    display:inline-block;
}

值得注意的是，ul在大多数浏览器中都有默认padding-right〜40px - 如果您希望它完全居中，请删除它。

此外，由于您为每个li margin-right 20px提供了#nav li:last-child { margin-right:0; }，因此该列表并非完全居中。删除最后一个孩子的边距。

{{1}}

Answer 2

<强> Working Demo

您可以在css文件中使用以下代码。您可以使用div text-align:center和div设置标题中心部分来更改css。你的工作已经完成。

CSS代码：

   #nav
{
    text-align:center;
    width : 100%;
}

#navLinks {
    list-style: none;
    display: inline-flex;
    margin: 0px auto;
}

#nav li {
    margin-right: 20px;
    display:inline;
}


#navHead {
    width: 100%;
    height: 12%;
    padding: 25px 0px;
    margin: 0px auto;
    background: red;

}

HTML代码：

<header id="navHead">
<div id="nav">
    <ul id="navLinks">
        <li>Home</li>
        <li>About Me</li>
        <li>Assignments</li>
    </ul>
</div>

结果：

Results

如何使用margin属性</ul>居中<ul>

2 个答案: