1

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

在这里，我的 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; }

我怎样才能使我的导航栏居中？

4

4 回答 4

1

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

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

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

于 2013-10-23T18:49:48.550 回答
0
  • 消除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;
}
于 2013-10-23T18:48:35.903 回答
0

Try this

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

and it will be in center.

于 2013-10-23T19:02:28.820 回答
0

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

给 List 一个固定的宽度，然后使用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!*/
}

现在，无论您在该列表中放了多少，它都会始终以您为中心。

于 2013-10-24T03:37:57.983 回答