【问题标题】：issues centering text in nav bar在导航栏中居中文本的问题
【发布时间】：2014-07-31 22:21:22
【问题描述】：

我在将导航栏中的文本居中时遇到问题。我已经尝试了我能想到的一切。任何帮助将不胜感激。

我这里有我的导航栏 html 和 css 代码。我已尝试将其居中并使用其他方式，但仍然卡住。

hTML

<div class="content-outer" id="top_nav">
            <div class="content-inner">
                <ul>


<li><a href="#">Home</a><li>
<li><a href="#">Digital</a></li>
<li><a href="#">Film</a></li>
<li><a href="#">Timeline</a></li>
<li><a href="#">Contact</a></li>                      
                </ul>
            </div>
        </div>

css

.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}


#top_nav { 
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}

#top_nav ul {
margin:0; 
padding:0px 0; 
list-style:none; 
width:990px; 
text-align: center;
overflow:hidden;
}

#top_nav ul li {
margin:0 56px 0 0; 
padding:0; 
font-size:1.7em; 
text-transform:uppercase; 
float:left; 
font-weight:bold;
}


#top_nav ul li a {
color:#fef6e9; 
text-decoration:none;
display: block;
}

#top_nav ul li a:hover {
color:#ed7163; 
text-decoration:none;
}


.content { padding: 10px 0;}

.content-outer { width:100%; float:left; overflow:visible; }

.content-outer .content-inner { width:978px; margin:0 auto; overflow:visible;         position:relative; }

【问题讨论】：

标签： html css navigation nav

【解决方案1】：

Is this what you are looking for?

我删除了多余的 div；创建了一个nav 元素；将margin: 0 auto; 放在ul 上；将li 上的float: left 替换为display: inline-block;，就可以了！

HTML

<nav id="top_nav">
    <ul>
        <li><a href="#">Home</a><li>
        <li><a href="#">Digital</a></li>
        <li><a href="#">Film</a></li>
        <li><a href="#">Timeline</a></li>
        <li><a href="#">Contact</a></li>                      
    </ul>
</nav>

CSS

#top_nav { 
  position:fixed;
  background:#343642;
  font-family: Impact, Charcoal, sans-serif;
  width: 100%;
}
#top_nav ul {
  margin: 0 auto; 
  padding:0px 0; 
  list-style:none; 
  width:990px; 
  text-align: center;
}  
#top_nav ul li {
  margin:0 56px 0 0; 
  padding:0; 
  font-size:1.7em; 
  text-transform:uppercase; 
  display: inline-block;
  font-weight:bold;
}
#top_nav ul li a {
  color:#fef6e9; 
  text-decoration:none;
  display: block;
}
#top_nav ul li a:hover {
  color:#ed7163; 
  text-decoration:none;
}

【讨论】：

【解决方案2】：

不像我在您的代码margin: 0 56px 0 0; 中看到的那样只为每个 li 元素提供一个边距，为什么不给每个 li 标签左右相等的边距？

例如：margin:0 34px 0 34px;

这可能是一个快速的解决方案。

查看这个DEMO：

http://jsfiddle.net/4n9hq/1/

【讨论】：

【解决方案3】：

这是最简单的答案

<nav>
    <ul>
        <li><a href="#">Home</a><li>
        <li><a href="#">Digital</a></li>                    
    </ul>
</nav>

CSS

ul {
  display: block;
  text-align: center;
}

li {
  display: inline-block;
}

总结：将“ul”标签设置为display:block，然后居中文本

【讨论】：