首页 > 代码库 > 高宽不定图片水平垂直居中

高宽不定图片水平垂直居中

2024-07-02 17:18:21   229人阅读

图片水平垂直居中的两个常用方法：

1、Table-cell。

　　IE8+及标准浏览器利用display:table-cell让容器以表格元素的方式呈现，配合vertical-align和text-align实现内部图片水平垂直居中。

　　IE67不支持display：table-cell,可用font-size，值为容器的0.875倍做hack。　　

    html,body,p, div { margin: 0; padding: 0; }
    .wrap { height: 300px; width: 300px; border: 1px solid #ccc; }
    .wrap {
        display: table-cell;     /* IE8+及标准浏览器识别，让div以表格元素的方式呈现，目的在于配合vertical-align*/
        vertical-align: middle; /* IE8+及标准浏览器识别，内容垂直居中 */
        text-align: center;     /* 内容水平居中 */
        *display: block;        /* IE67识别，保证父级容器为块元素 */
        *font-size: 262px;        /* IE67hack，以font-size的方式来实现vertical-align的效果值为父高的0.875倍 */
        *font-family: Arail;    /* 防止非UTF-8编码造成hack失效 */
    }
    .wrap img {vertical-align: middle;} /* IE67识别，图片矫正垂直,配合font-size  */
    <div class="wrap">
        <img src="http://static.vas.pptv.com/vas/g/games/v_20130712105432/images/logo.png" />
    </div>

　　这个方法的缺点很明显，依赖于table-cell,由于table-cell需要在文档流内才能发挥效用，若父容器(wrap)需要position:absolute或者float，则此方法失效。

 

2、button嵌套

　 button本身的内容是自动水平垂直居中的，此点上无兼容性问题，让button包含图片，图片不需要任何特殊处理即可水平垂直居中，算是皆大欢喜，记得button要禁用。

    html,body,p, div { margin: 0; padding: 0; }
    .wrap button {
        height: 300px;
        width: 300px;
        border: 1px solid #ccc; 
        background: none; 
    }
    <div class="wrap">
        <button disabled="true">
            <img src="http://static.vas.pptv.com/vas/g/games/v_20130712105432/images/logo.png" />
        </button>
    </div>

 　　这个方法比第一个方法代码更简洁，兼容性更好，html结构上多了一层标签，如果只是作为CSS呈现，算是比较好的方法。

　　 但是在IE下，由于image包含在了button当中，用户能触发交互的只有button，不能直接由用户触发绑定在image上的事件，解决的办法，让button去处理image上的句柄。标准浏览器没有这个问题。

　　


联系
我们