日期:2014-05-17  浏览次数:20759 次

导航条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一样就可以