我这里有这个css代码
.navigation{
width:100%;
background-color:#7a7a7a;
font-size:18px;
}
.navigation ul {
list-style-type: none;
margin: 0;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
我想要做的是集中导航.我尝试使用text-align：center;和vertical-align：middle;但他们都没有工作.
这是HTML代码
<div class="navigation"> <ul> <li><a href="http://surfthecurve.ca/">home</a></li> <li><a href="http://surfthecurve.ca/?page_id=7">about</a></li> <li><a href="http://surfthecurve.ca/?page_id=9">tutors</a></li> <li><a href="http://surfthecurve.ca/?page_id=11">students</a></li> <li><a href="http://surfthecurve.ca/?page_id=13">contact us</a></li> </ul> </div><!--navigation-->
当我说它不起作用时,我的意思是文本与左边对齐.
解决方法
更改< a>上的规则元素来自：
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
至
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
width:100%;
text-align:center;
}
只需添加两个新规则(宽度：100％;以及text-align：center;).您需要使锚点展开以占据列表项的整个宽度,然后将文本对齐居中.
