侧导航栏中图片与文字垂直居中问题

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-08-01 10:52:37　-　阅:　-　评:1　-　积分:0

好久没有逛贴吧了，今天一去，小伙伴们一堆问题，洒家在那里一个个的写代码解决，反正也是闲着无聊。其中看到一个小伙伴遇到一个侧导航栏中图片与文字不垂直居中的问题，问题图如下：

当然了，这个问题是在ie7以下版本中才有的，ie7以上可用“vertical-align:middle”来解决。于是洒家花了点时间写了串代码,提供了两种解决方案。方案一：图片左浮，通过调整“margin”的值来控制图片与文字都重起居中；方案二：图标设置成背景图片，通过位移。为了考虑兼容性问题，洒家就忽略了伪对象“:after”，还是来看源码吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>侧导航栏中图片与文字垂直居中问题---艺灵设计,qq群:231749938</title>
<meta name="keywords" content="图片文字垂直居中,ie6 bug,ie6中png图片背景透明bug,DD_belatedPNG_0.0.8a.js,li与li之间间距bug">
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<style type="text/css">
*{margin:0;padding:0}
body {font-size:14px;font-family:Arial, Helvetica, sans-serif, "宋体"}
.clearfix:after {display:table;content:"";clear:both;line-height:0;}
.clearfix{zoom:1}/*ie7-*/
a{text-decoration:none;color:#ccc;}
img{border:0}
ul{list-style-type:none;width:200px;margin:0 auto}
li{height:30px;line-height:30px;border-bottom:1px dashed #999;}
li a{display:block}
ul li a:hover{color:#fff;background-color:#09C}
li *{zoom:1}/*解决ie低版本下，li与li之间的间距问题*/
.ul1 li img{width:20px;height:20px;float:left;margin:5px 5px 0 20px;}
.ul2 li a{background:url(/d/file/div/2014-08-01/nav_icon.png) no-repeat 20px 5px;text-indent:45px;}
/*以下a背景垂直的值供参考，具体要看亲在ps中图片是如何排列的了*/
.ul2 li a.two{background-position:20px -33px}
.ul2 li a.three{background-position:20px -63px}
.ul2 li a.four{background-position:20px -93px}
</style>
<!--兼容ie6下png图片背景透明-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('a,background');
</script>
<![endif]-->
</head>
<body>
<!--第一种方法：图片左浮，通过调节margin间距来兼容ie低版本中垂直居中的问题。-->
<ul class="ul1">
<li><a href=""><img src="/favicon.ico">订单查询</a></li>
<li><a href=""><img src="/favicon.ico">账户提现</a></li>
<li><a href=""><img src="/favicon.ico">营业员管理</a></li>
<li><a href=""><img src="/favicon.ico">设置</a></li>
</ul>
<br /><br /><br />
<!--第二种方法：图标设置成背景图片-->
<ul class="ul2">
<li><a href="" class="one">订单查询</a></li>
<li><a href="" class="two">账户提现</a></li>
<li><a href="" class="three">营业员管理</a></li>
<li><a href="" class="four">设置</a></li>
</ul>
</body>
</html>

来放一张上述源码在ie6下的效果图吧：

上面这串代码中提供了两种解决方案，当然还有其他方案，在此就不枚举了，亲可以自己尝试解决此类问题。上面这串代码中附带解决了ie中的两个bug，一个是“li之间有空隙的bug”，一个是“ie6下png图片背景透明的bug”

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2014-08-01/181.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！