首页 > 其他 > 详细

img垂直居中

时间:2017-11-18 19:31:23      阅读:270      评论:0      收藏:0      [点我收藏+]
<div style="border: 1px solid #CCC; height: 300px;">
    <span style="height:100%%;display: inline-block;vertical-align: middle;"></span>  <!--这是hack元素-->
    <img src="http://images.cnblogs.com/com/onlysea/304895/r_474.jpg" style="height:100px;vertical-align: middle;" />
    <span style="vertical-align: middle;">嘻嘻嘻嘻</span> 
</div>

 

<!--能怎么玩:hack元素后面是inline或者inline-block都可以;是图片是什么元素都可以;几个都可以;hack元素可以用before来完成(对着父元素加before);-->
<!--使用条件:父元素要有高度(不是说要设固定高度,只不过没高度哪来的居中一说);需要居中的元素要设vertical-align: middle;-->
 
 
基线以及vertical-align的性质:
vertical-align要想正常使用,必须要在元素前面放一个

img垂直居中

原文:http://www.cnblogs.com/rachelch/p/7857598.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!