在做页面的时候，可能会用到图片+文字的链接。图片是顶端对齐，而文字是基线对齐的。这时候就会出现同一个链接内的图片与文字对不齐。如图：
HTML代码如下：
1 <ul class="right"> 2 <li ><a href=""><img src="images/home.jpg" alt="" >首页</a></li> 3 <li ><a href=""><img src="images/login.jpg" alt="">登录</a></li> 4 <li ><a href=""><img src="images/register.jpg" alt="">注册</a></li> 5 <li ><a href=""><img src="images/help.jpg" alt="">帮助</a></li> 6 </ul>
这时候，需要对img标签设置vertical-align，从而实现图片与文字对齐：
1 .right li a{display: inline-block; font-size: 14px; margin-top: 10px;} 2 .right li img{vertical-align:-8px;} 3 .right a{color: #fff;}
我们知道，vertical-align的值可以是：
从倒数第二行可以看到“允许使用负值”，负值代表向下移动。
效果如图：
图片与文字实现了对齐。