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

  • 相关阅读:
    周末郑州程序员朋友技术交流中的PPT
    WCF并发连接数的问题
    郑州.Net技术人员的招聘信息
    在路上
    Windows8体验(1)安装
    挖掘0day打进不同学校
    记一次绕过宝塔防火墙的BC站渗透
    一次实战中对tp5网站getshell方式的测试
    一次从弱口令到getshell
    一次HW实战
  • 原文地址:https://www.cnblogs.com/liyouwu/p/9003262.html
Copyright © 2011-2022 走看看