如下代码所示：
<div class="container"> <div style="display: inline-block; height: 100px; width: 100px;"><img src="/myImg.jpg"></div> <div style="display: inline-block; height: 100px; width: 100px;">Good Morning! Sir!</div>
<div style="display: inline-block; height: 100px; width: 100px;"></div>
</div>
容器container的子元素均为inline-block显示，而当子元素中存在图片或文字的时候，子元素的显示会显然不在水平线上，即有的元素会下沉，这一现象与行内元素的对齐有关，要解决该问题，可用vertical-align属性，如下：
<div class="container"> <div style="display: inline-block; height: 100px; width: 100px; vertical-align: middle;"><img src="/myImg.jpg"></div> <div style="display: inline-block; height: 100px; width: 100px; vertical-align: middle;">Good Morning! Sir!</div> <div style="display: inline-block; height: 100px; width: 100px; vertical-align: middle;"></div> </div>
vertical-align取middle，top，bottom值均可。
原文：http://www.cnblogs.com/mousea/p/7928790.html