未知宽高图片垂直居中

场景：图片宽高未知，使其在固定宽高容器中垂直居中。

一、vertical:middle原理配合after伪元素实现

为父元素设定一个伪元素：：after,其高度为父元素的高度，display:inline-block,将其设定为vertical-align:middle即可撑开line box，同时line box的baseline为父元素高度一半的位置。然后设定子元素vertical-align:middle，即可实现居中。

<style type="text/css">
.pic_box{
    border:1px solid red;    
    width: 300px;
    height: 300px;
    text-align: center;
    overflow: hidden;
    font-size: 0;
}
.pic_box::after{
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
img{
    vertical-align: middle;
}
</style>

<div class="pic_box">
    <img src="img/sheep.png" />
</div>

兼容性：这里需要使用一些hack，由于IE8不支持::after伪元素，所以需要一个span来替代。而display:inline-block亦需要hack。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
.g-ctn {
    height: 800px;
    width: 100%;
    text-align: center;
}
.g-ctn:after,.g-ctn span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle;
}
.g-ctn:after{
    content:'';
}
.g-ctn .g-mn{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width: 80%;
    max-height: 80%;
    max-width: 1000px;
    vertical-align:middle;
    overflow: auto;
}
</style>
</head>
<body>
<div class="g-ctn">
    <div class="g-mn">
        <p>这是内容区</p>
        <p style="font-size: 3em;">这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话这是一大串的废话</p>
    </div>
    <!--[if lt IE 8]><span></span><![endif]-->
</div>
</body>
</html>
View Code

二、table-cell实现

非常简单：容器设置display:table，img外嵌套一层<span>或者<a>标签，设置display:table-cell，再用vertical-align:middle搞定。

<style type="text/css">
.pic_box{
    display: table;
    border:1px solid red;    
    width: 308px;
    height: 308px;
    overflow: hidden;
    text-align: center;
}
.pic_box a{
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    height: 300px;
}
</style>

<div class="pic_box">
    <a href="#">
        <img src="img/sheep.png" />
    </a>
</div>

兼容性写法：

HTML代码：

<div class=”demo”><a href=“#”><img src=“images/01.jpg” /></a></div>

CSS代码：

/*For Firefox Chrome*/
.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}
.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}
.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}
/*For IE7*/
*+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}
*+html .demo a img{position:relative;top:-50%;left:-50%;}
/*For IE6*/
*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}
*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?“200px”:“auto”);height:expression(this.height>140?“140px”:“auto”);}
View Code

 

 

 

资源链接

http://stylechen.com/img-middle.html

http://www.daqianduan.com/2733.html

大小不固定的图片、多行文字的水平垂直居中

http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%A7%E5%B0%8F%E4%B8%8D%E5%9B%BA%E5%AE%9A%E7%9A%84%E5%9B%BE%E7%89%87%E3%80%81%E5%A4%9A%E8%A1%8C%E6%96%87%E5%AD%97%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

 

 

http://www.cnblogs.com/shouce/p/5132235.html

 

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4745577.html有问题欢迎与我讨论，共同进步。

posted @ 2015-10-19 17:11  starof  阅读(1217)  评论(0)  编辑  收藏  举报