img垂直居中

Posted 2020-10-14 rachelch

<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/cnblogs_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要想正常使用，必须要在元素前面放一个

 

方法2：

使用flex弹性布局的align-items:center;

<style>
    div{display:flex;align-items:center;}
</style>

<div>
    <img src="aa.png"/>
</div>