仅用css实现图片在div中垂直居中的方法

2016-08-15  本文已影响36人  米风

先放上demo演示地址:http://codepen.io/mifeng/pen/akXRrb

我们都知道,直接对img标签使用vertical-align:middle属性,是无法产生垂直居中效果的。那么如何能够利用vertical-align实现垂直居中呢,其实这里是巧妙地利用了一个span空标签,设置height:100%,也即是和div的高度一致。而决定行高的是行内最高的元素的值,相当于将div内的区域高度撑到了和div一致,这个时候对img标签设置的vertical-align:middle属性便起到了垂直居中的效果。

值得注意的是,需要将span标签设置display: inline-block哦。

上一篇 下一篇

猜你喜欢

热点阅读