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

Question

在使用inline-block时发现，这个属性不仅会造成水平方向的间隙(这应该是inline属性造成的)，但是为什么会造成垂直不居中？
例如
html
这是文本

Answer 1

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