Question

css文体和图标垂直居中问题，vertical-align

<li>时间排序<span class="icon"></span></li>
1、文字和图标一起line-height就不起作用了，是为什么？
2、我要使他们一起居中，用了vertical-align属性，但是为什么middle时不是很整齐，要直接给vertical-align赋一个具体的值比如vertical-align:5px才行？
3、比如vertical-align:5px;这个5px是基于什么位置的？为什么ie中往往不行，要重新弄另外一个值？

Answer 1

总的来说，兼容问题。
1。看你的图标应该为背景吧，line-height对背景高度要对span设置 display：inline-block（没有测试）
2.vertical-align对块元素不适用。对内联和表格适用。
3。ie有兼容性问题，一般要对ie特别设置。5x是基于行内的基线。5x的意思元素的基线比行内的基线高出5px，负值即为低5px。行内基线就是这个行内英文字母x的下端所在的水平线。内联元素基线如img的基线为img的底端所在的水平线。
如果实在效果不好，可以换方式布局。
说的比较凌乱。你可以查一查关于以上你用到的两种属性具体解析。
望采纳！

追问

line-height对背景高度要对span设置 display：inline-block，设置了，span还是居中不了？另外图标+文字在一块里面垂直居中还能有什么布局方法吗？

追答

一般情况是用span
你可以试试文字+img 然后对外层容器加行高，对img加vertical-align:middle就可以。