inline-block 元素会造成垂直不居中？

Question

在使用inline-block时发现，这个属性不仅会造成水平方向的间隙(这应该是inline属性造成的)，但是为什么会造成垂直不居中？例如html这是文本scss[class*="icon-"]{display:inline-block;}.wrap{height:30px;line-height:30px;}这样却没法使icon标签垂直居中，只有使用类似设置.wrapfont-size:0;等方法才能使它居中，这样写起来好麻烦。。不知道大家在写icon的时候都是怎么搞？float？

Answer 1

[class*="icon-"]{
display:inline-block;
vertical-align:center;
}
.wrap{
height:30px;
line-height:30px;
vertical-align:center;
}
这样做就能达到居中。
但是由于一些icon图片的里面的icon并没有居中的原因，视觉上看上去并没有居中，这时候还需要配合position:relative,把icon进行一些微调，来达到视觉上的居中。