See Fiddle

Question

嘿伙计这件事让我发疯，我似乎可以让我的导航栏漂浮到中心。尝试了一切，似乎无法找到一个简单的解释。任何帮助非常感谢

HTML

<div class="container">
<div class="sixteen columns header">
<h1>Learn Guitar Online</h1>
<ul class="nav">
<li><a href="index.php">Home</a></li>
<li><a href="signup.php">Sign UP</a></li>
<li><a href="forum.php">Forum</a></li>
<li><a href="video.php">Video</a></li>
<li><a href="other.php">Other</a></li>
</ul>   
</div>

更多HTML ...

css

.container .sixteen.columns.headerul.nav li { 

}
.container .sixteen.columns.header ul.nav li a{
text-decoration: none;
}

Answer 1

See Fiddle

CSS

container{
    text-align:center; /* center child content */
    width:100%; /* be the max available (page) width */
}
ul{
    margin:0 auto; /* dont offset the top/bottom of the elemtent but automatically calculate left/right  offset (margin) */
    width:300px; /* set a fixed width for the element so it has a relative size to align vs its parent*/
}
li{
    display:inline-block; /* display list items on a single line */
}

您需要告诉列表（ul）如何对齐自己，这可以通过在宽度为{margin的容器内给它一个固定的0 auto来完成{1}}使用集中对齐的文字。

要获得同一行的100%，您需要将其li

Answer 2

如果您不想在菜单中添加固定宽度，可以使用text-align: center上的<ul>和display: inline-block元素<li>。

<强> jsFiddle

完整的CSS

html, body{
    width:100%;
}
container{
    width:100%;
}
ul{
    padding: 0;
    display:block;
    text-align: center;
}
li{
    display:inline-block;
}

Answer 3

尝试为导航和边距添加宽度：0 auto

有关更多居中提示，请阅读：

http://www.tipue.com/blog/center-a-div/

如果您希望导航始终可见，您将需要位置：固定。

导航栏进入中心

3 个答案:

See Fiddle