play spa 错位 wid ood 解决方法 display 元素 morn
如下代码所示:
- <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值均可。
inline-block元素出现位置错位的解决方法
play spa 错位 wid ood 解决方法 display 元素 morn
原文:http://www.cnblogs.com/mousea/p/7928790.html
来源: http://www.bubuko.com/infodetail-2412443.html