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

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

例如

html<div class="wrap">
  <span class="icon-xx">
  <span>这是文本</span>
</div>

scss
[class*=" icon-"] {
  display: inline-block; 
}

.wrap {
  height: 30px;
  line-height: 30px;
}

这样却没法使icon标签垂直居中，只有使用类似 设置 .wrap font-size: 0;等方法才能使它居中，这样写起来好麻烦。。不知道大家在写icon的时候都是怎么搞？float ？

---

提供两个链接，一个解释了vertical-align，一个则提供了解决办法。
1.vertical-align： https://css-tricks.com/what-is-vertical-align/
2.inline-block元素居中： http://stackoverflow.com/questions/5932201/how-to-vertical-align-an-in...

---

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

---

我从隔壁提问
http://.com/q/1010000002779505
http://.com/q/1010000000469154
的回答里看到了造成这个的原因。。