居中水平导航菜单答案

【问题标题】：Center horizontal navigation menu居中水平导航菜单
【发布时间】：2014-07-12 17:30:34
【问题描述】：

正在努力将导航栏置于浏览器中间...尝试了许多通过谷歌找到的东西，但还没有运气。似乎这应该是一件很容易的事情，但结果却是一件令人头疼的事情！

代码如下。

<div id="nav">
            <ul>
                <li class="home"><a href="index.php">Home</a></li>
                <li class="detail"><a href="about.php">About</a></li>
                <li class="work"><a href="work.php">Work</a></li>
                <li class="contact"><a href="contact.php">Contact</a></li>
            </ul>
        </div>

#nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    border-bottom: 1px solid #ccc;  }
#nav ul {
    display: inline-block;
    list-style-type: none;
}
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li:first-child a {
    border-left: 1px solid #ccc; }
#nav li a:hover {

color: #50B748;

}

【问题讨论】：

标签： html css navigation center

【解决方案1】：

尽量不要使用浮点数，而是改用display:inline-block。

JSfiddle Demo

CSS

ul {
    padding: 0;
    margin: 0;
}

#nav {
    //width: 100%; /* not required */
    //float: left; /* not required */
    margin: 0 0 1em 0;
    padding: 0;    
    border-bottom: 1px solid #ccc;  }

#nav ul {
    width:100%;
    display: block;
    list-style-type: none;
    text-align: center; /* add this */
}
#nav li {
   //float: left;  /* remove */
    display: inline-block; /* add this */
}
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }

#nav li:first-child a {
    border-left: 1px solid #ccc; }

#nav li a:hover {    
    color: #50B748;
}

编辑 - 添加了 ul 填充/边距的重置

【讨论】：

谢谢，它仍然稍微向右偏移，有什么想法吗？
您必须重置 ul - jsfiddle.net/Paulie_D/9ELje/10 上的填充
ul 上没有填充？通过偏移，我会说它向右大约 30px
它是浏览器自动添加的……所以你必须重置它。

【解决方案2】：

给它添加一个margin-top:50%;

就像这样：

#nav {


    width: 100%;
    float: left;
margin-top:50%;
    padding: 0;
    border-bottom: 1px solid #ccc;  }
#nav ul {
    display: inline-block;
    list-style-type: none;
}
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li:first-child a {
    border-left: 1px solid #ccc; }
#nav li a:hover {

color: #50B748;

}

这能解决您的问题吗？还是我没听懂你的问题？

【讨论】：

不...你不明白...不是垂直居中，水平居中。

【解决方案3】：

只需在#nav 样式中添加text-align: center;。并重置UL默认边距应该是这样的

HTML

<div id="nav">
            <ul>
                <li class="home"><a href="index.php">Home</a></li>
                <li class="detail"><a href="about.php">About</a></li>
                <li class="work"><a href="work.php">Work</a></li>
                <li class="contact"><a href="contact.php">Contact</a></li>
            </ul>
        </div>

CSS

#nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    border-bottom: 1px solid #ccc;  }
#nav ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
}
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li:first-child a {
    border-left: 1px solid #ccc; }
#nav li a:hover {

color: #50B748;

}

【讨论】：