全面理解line-height与vertical-align

<div>          <i></i><span>我是特别长的特别长的特别长的特别长的多行文字</span>      </div>

 

【5】图标和文本对齐

<方法一>使用长度负值

复制代码img{ vertical-align: -5px;}

　　根据实践经验，20*20像素的图标后面跟14px的文字，vertical-align设置为-5px可以达到比较好的对齐效果

<方法二>使用文本底部对齐

复制代码img{ vertical-align: text-bottom;}

　　使用baseline会使图标偏上；使用top/bottom会受到其他行内元素影响造成定位偏差；使用middle需要恰好的字体大小且兼容性不高；使用text-bottom较合适，不受行高及其他内联元素影响

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/xiaohuochai/p/5271217.html