display: inline-block的妙用

1.

<div class="banner_area">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span  class="item ></span>
<span class="item "></span>
</div>

如上述class='banner_area'的div下面有5个子span，如何让这5个子span在父div中排列一排而且垂直居中呢?

通常我们可以使用float,或者定位来做，但是我们也可以使用display: inline-block来做。办法有很多。

但是在设置 span元素display: inline-block后发现，每个span并不是相邻挨着，水平方向和垂直方向都不对齐。

解决办法是 设置父元素(div) font-size:0px;会发现5个span会无间隔的对齐。但是并不垂直居中，我们可以设置父元素(div)的line-height为自己的高度，然后设置

span的vertical-align:middle;就可以实现我们想要的效果.

注(也可以吧span换为其它元素如div等)。

(滴水穿石)