导航条li中的文字居中有关问题(主要是不同浏览器效果不同)

导航条li中的文字居中问题(主要是不同浏览器效果不同)
在用CSS定义导航条的时候，发现导航条的文字无法垂直居中(在IE中可以正常居中，但是在其他浏览器中就无法居中)，有哪位大侠给一个完美的解决方案不？

HTML代码：

<div class="header">
    <div class="menu">
        <div class="leftmenu">
<ul><li class="limenu"><a href="">首页</a></li><li class="limenu"><a href="">栏目名称</a></li>
</ul>
</div>
</div>
</div>

CSS代码：

.header{height:59px;overflow:hidden;width:100%;background:url(../images/head.jpg) repeat-x ;}
.menu{width:990px;height:59px;line-height:59px;margin:0px auto;}
.leftmenu{float:left;clear:both;}
.limenu ul{margin:0;padding:0; text-align:center;}
.limenu{display:inline;padding:0 20px;}
.limenu a{font-size:18px;height:59px;line-height:59px;color:white;}
.limenu:hover{background-color:black;}

[解决办法]
你的ul是leftmenu的子元素
所以这里
.leftmenu{float:left;clear:both;}
.limenu ul{margin:0;padding:0; text-align:center;}
要改为
.leftmenu{float:left;clear:both;}
.leftmenu ul{margin:0;padding:0; text-align:center;}

[解决办法]

引用:

引用:
你的ul是leftmenu的子元素
所以这里
.leftmenu{float:left;clear:both;}
.limenu ul{margin:0;padding:0; text-align:center;}
要改为
.leftmenu{float:left;clear:both;}
.leftmenu ul{margin:0;padding……

。。。看出来了，眼花了哈哈。
[解决办法]
这个我经常遇见，最好的解决方法，
1.选择一个合适的字体，

[解决办法]
li 限定 height   而 a 的line-height与这个height一样就可以

查看更多 下一篇