您的位置：首页 > 其它

图片在块级元素中（宽高可变）垂直居中

2017-03-27 20:10 190 查看
当块级元素随着设备屏幕等比防缩的时候   图片垂直居中的css方法：

让iconImg垂直居中于scaleImg(自适应宽高);

<li>
<span class="coverLayer"></span>
<img src="images/index/bottom1.jpg " class="scaleImg" alt=""/>
<div class="iconDiv iconDiv1">
<span class="spanBlank"></span>
<img src="images/index/icons1.png" class="iconImg ">
</div>
</li>


.iconDiv{position:absolute;left:25%;top:0;margin:auto;z-index:3;width:50%;height:100%;
text-align: center;transition: 1s ;font-size: 0;}


.iconDiv .spanBlank{display:inline-block;width:.01rem;height:100%;margin-left:-.01rem;

vertical-align: middle;}

.bottom ul li .iconDiv img{width:100%;height:auto;vertical-align: middle;}

原理：给父级块元素设置好宽高，让空标签高与父级相同，宽为1px ,margin-left:-1px;vertical-align：middle;父级要设font-size:0;

垂直居中图片宽与父级相同；高自适应；vertical-align:middle;
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航