导航条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;}
------解决方案--------------------
。。。看出来了,眼花了哈哈。
------解决方案--------------------这个我经常遇见,最好的解决方法,
1.选择一个合适的字体,
------解决方案--------------------li 限定 height 而 a 的line-height与这个height一样就可以