zoukankan      html  css  js  c++  java
  • CSS图片垂直居中详解

    CSS图片垂直居中问题,困扰了我许久,今天终于可以总结下来了:


    方法一:利用定位

    HTML结构如:

    <div class="box">
        <a class="pic-wrap" href="#" target="_blank">
            <img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png">
        </a>
    </div>
    

     CSS代码如:

    body {
        margin: 0;
        padding: 0;
        font: 12px/1.5 tahoma,arial;
    }
    .box {
         220px;
        height: 220px;
        border: 1px solid #F30;
        margin: 100px auto 0;
        display: table;
    }
    .pic-wrap {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    /*主要针对IE6、7的hack*/
    .box {
        *position: relative;
    }
    .pic-wrap {
        * 100%;
        *position: absolute;
        *top: 50%;
        *left: 0;
        /*继承自body的字体会影响到ie6,设置默认的windows系统字体*/
        _font-family: sans-serif;
    }
    .pic-wrap img {
        *position: relative;
        *top: -50%;
        *left: 0;
        /*在ie中空文本节点有默认高度*/
        vertical-align: middle\9;
        /*在ie中,a标签中的img标签默认有蓝色边框*/
        border: none\9;
    }
    


    方法二:

    HTML结构同上,

    CSS代码如:

    .box {
         220px;
        height: 220px;
        border: 1px solid #F30;
        margin: 100px auto 0;
    }
    .pic-wrap {
        display: table-cell;
        vertical-align: middle;
         220px;
        height: 220px;
        text-align: center;
        /*ie6、7不支持display:table-cell*/
        *display: block;
        *font-size: 192px; /*字体大小为height*0.783或者height/1.14,这里约为192px*/
        _font-family: sans-serif; /*设置字体,否则在ie6下会有一个像素的偏差*/
    }
    .pic-wrap img {
        border: none;
        vertical-align: middle; /*由于ie下空文本节点有默认高度,所以设置*/       
    }
    

    注意,当在css中设置了body元素字体的话,那么方法二在ie7下会失效的


    最佳方法:

    CSS代码如:

    body {
        margin: 0;
        padding: 0;
        font: 12px/1.5 tahoma,arial;
    }
    .box {
         220px;
        height: 220px;
        border: 1px solid #F30;
        margin: 100px auto 0;
    }
    .pic-wrap {
        display: table-cell;
        vertical-align: middle;
         220px;
        height: 220px;
        text-align: center;
        /*ie6、7不支持display:table-cell*/
        *display: block;
        _font-size: 192px;
        +line-height: 220px; /*设置ie7中空文本节点行高为220px*/
        _font-family: sans-serif;
    }
    .pic-wrap img {
        border: none;
        vertical-align: middle\9;/*由于ie中有默认高度的空文本节点*/
    }
    
  • 相关阅读:
    Python操作Redis的实例(七)
    Python操作Redis(六)
    Redis的数据类型之set集合,zset有序集合类型操作 (五)
    Redis的数据类型之list列表类型操作 (四)
    Redis的数据类型之hash哈希类型操作 (三)
    Redis的数据类型之String字符串类型操作(二)
    Redis基础介绍以及编译安装过程(一)
    python操作IP---IPy模块
    安装cnpm报错
    vue-cli · Failed to download repo vuejs-templates/webpack: connect ECONNREF
  • 原文地址:https://www.cnblogs.com/yangjunhua/p/2328055.html
Copyright © 2011-2022 走看看