码迷,mamicode.com
首页 > 其他好文 > 详细

img垂直居中

时间:2017-11-18 20:03:23      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:hack   only   col   isp   img   固定高度   border   ges   nbsp   

<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垂直居中

标签:hack   only   col   isp   img   固定高度   border   ges   nbsp   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!