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

转载于:https://www.cnblogs.com/mousea/p/7928790.html