zoukankan      html  css  js  c++  java
  • 关于图片垂直居中的方法

    关于图片垂直居中的方法

    效果图如下:

    第一种:

    主要利用  display:table-cell  此元素会作为一个表格单元格显示(类似 <td> 和 <th>)

    兼容ie8及以上的浏览器

    HTML代码

    <div class="divCon img_wrap">  
        <p><img src="../TIM截图20180504094302.png" /></p>
    </div>  
    

    css代码

    .divCon{  
    	 400px;
    	height: 300px;
    	border: 1px dashed #ccc;
    	display: table-cell;
    	vertical-align: middle;
    	text-align: center;
    }  
      
    .divCon img{  
    	 50px;
    	height: 50px;
    }  
    

    第二种:背景图法  

    兼容ie6以上的浏览器

    HTML代码

    <div class="divCon img_wrap">  
        
    </div>  
    

    css代码

    .img_wrap{
         400px;
        height: 300px;
        border: 1px dashed #ccc;
        background: url(TIM截图20180504094302.png) no-repeat center center;
    }
    

    第三种:利用p标签的line-height与text-align: center;

    兼容ie8及以上的浏览器

    HTML代码

    <div class="divCon img_wrap">  
        <p><img src="TIM截图20180504094302.png" /></p>
    </div>  
    

    css代码

    *{margin: 0px;padding: 0px}
    .img_wrap{
         400px;
        height: 300px;
        border: 1px dashed #ccc;
        text-align: center;
        margin: 200px auto
    }
    .img_wrap p{
        400px;
        height:300px;
        line-height:300px;   /*行高等于高度 */
    }
    .img_wrap p img{
        vertical-align:middle;
        border:1px solid #ccc;
    }

    原文章出处:https://www.cnblogs.com/sese/p/5941389.html

  • 相关阅读:
    【Spring】Spring中的Bean
    【Spring】Spring中的Bean
    【Spring】Spring中的Bean
    【Spring】Spring中的Bean
    简单的订阅发布模式
    setTimeout,setInterval原理
    按圆形轨迹排列元素
    平行四边形导航,背景颜色渐变动画(不支持IE6/7/8)
    html,body的关系
    判断移动端js代码
  • 原文地址:https://www.cnblogs.com/liyouwu/p/9003262.html
Copyright © 2011-2022 走看看