Question

我迷路了......我尝试了问题中给出的其他答案而没有结果。

在这里，我的CCS：

ul.nav { padding-top: 5px; font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif; float: left; }
ul.nav li { margin-left: 7px; }
    ul.nav a { font-size: 17px; color: #918f8f; text-decoration: none; text-shadow: 1px 1px 0px #fff; padding: 15px 6px 18px; }
    ul.nav a:hover { color: #000000; text-shadow: 1px 1px 0px #fff; }

如何将导航栏居中？

Answer 1

您可以给UL一个固定的宽度和中心，如下所示：

ul.nav {
    width: 200px;
    margin: 0 auto;
}

如果此导航不应该是侧边栏，则删除float：left;

Answer 2

删除float:left;
添加width.
添加margin:0 auto;

` CSS

ul.nav {
    padding-top: 5px;
    font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif;
    width: 300px;
    margin: 0 auto;
}

Answer 3

试试这个

body{ text-align:center;}
{And rest of your code...}

它将在中心。

Answer 4

首先删除float - 它会将您的列表抛到屏幕左侧。然后，您有两个选择：

为列表指定固定宽度，然后使用margin:0 auto。

ul.nav {
    width: 40em;
    margin: 0 auto;
}

如果你的导航栏中总是有一定数量的链接，那么这很好。如果这种情况频繁变化，甚至动态变化，则不太有用。我更喜欢以下解决方案，但需要额外的标记

使用换行元素，样式为display:table

HTML：

<nav class="my-class" role="navigation">
    <ul>
        ...
    </ul>
</nav>

然后你的CSS：

.my-class {
    display: table; /*centers its contents*/
    width: 100%; /*make sure it doesn't collapse*/
    margin: 0 auto;
}

ul {
    whatever /*just don't use text align!*/
}

现在无论你放入多少列表，它总是以你为中心。

我需要将导航栏居中

4 个答案: