inline-block元素出現位置錯位的解決方法

如下代碼所示：

<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值均可。