问题在导航栏中居中文本

时间:2014-07-31 22:21:23

标签: html css navigation nav

我的导航栏中存在文本中心问题。我已经尝试了所有我能想到的东西。任何帮助将不胜感激。

这里有我的导航栏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; }

3 个答案:

答案 0 :(得分:2)

Is this what you are looking for?

enter image description here

我删除了额外的div;创建了一个nav元素;将margin: 0 auto;放在ul上;用[{1}}替换了float: left上的li,你就拥有了它!


HTML


display: inline-block;


CSS


<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>

答案 1 :(得分:0)

而不是像我在代码margin: 0 56px 0 0;中看到的那样只为每个li元素赋予一个边距权限,为什么你不为每个li标签左右分别给出相等的边距?

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

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

选中 DEMO

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

答案 2 :(得分:0)

以下是最简单的答案

<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”标记设置为:block,然后设置中心文本