<li>文字<span class="icon"></span></li>
- 文字和图标一起line-height就不起作用了，是为什么？
- 我要使他们一起居中，用了vertical-align属性，但是为什么middle时不是很整齐，要直接给vertical-align赋一个具体的值比如vertical-align:5px才行？
- 比如vertical-align:5px;这个5px是基于什么位置的？为什么ie中往往不行，要重新弄另外一个值？
1.line-height 用于需要垂直居中的元素，比如 <li> 和 <i> 或 <span>, 所以用对了元素，line-height 是起作用的.
2.为什么 vertical-align: middle 看起来不对齐，这造成的原因可能是相同 font-size 大小的字体和图标，显示的视觉大小就已经不一致，所以垂直居中后，也没显对齐.
我尝试将图标大小稍微改小，同样的 line-height 的情况下，视觉上是一样垂直居中对齐的.
https://jsfiddle.net/zc0bbx8q/
vertical-align:5px; 基于 line-height
http://jsfiddle.net/Lv8px7hd/
这样？
也就是文字也要用span包住