链接内的图片与文字如何对齐？

在做页面的时候，可能会用到图片+文字的链接。图片是顶端对齐，而文字是基线对齐的。这时候就会出现同一个链接内的图片与文字对不齐。如图：

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的值可以是：

从倒数第二行可以看到“允许使用负值”，负值代表向下移动。

效果如图：

图片与文字实现了对齐。

 

转载于:https://www.cnblogs.com/yetj/p/7220588.html