图片(水平垂直)居中

By Rainbow on 2010-10-10 // HTML / CSS // 4027 Views+ // (0) Comments

问题

我们要居中容器内的图片，是一件不容易的事，容器可以确定大小，但是图片的大小是不明确的。我们不确定图片大小的主要原因是为了保证图片的完整性和不失真性，我们最好不要强制的缩放图片大小和裁剪图片。

如果把图片作为背景图片，水平垂直居中是非常容易的事。但是我们今天要说的是盒子中的<img> 元素水平垂直居中。

方案有许多，完美的方案我们一直再找。

一些解决方案

方法一：透明gif图片+背景定位

The HTML Code:

    <div class="wrapToCenter">
        <img src="images/pixel.gif" style="background-image:url(images/g101.gif);"/> 		
    </div>
    <div class="wrapToCenter">
        <img src="images/pixel.gif" style="background-image:url(images/g161.gif);"/> 
    </div>

The CSS Code:

1
2
3

.wrapToCenter{ float:left; margin:10px;background:#FFECEC url(images/g1001cc2.gif) no-repeat center center; border:1px solid #666;}
.wrapToCenter{ height:300px; width:300px;}
.wrapToCenter  img{ display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center;}

技术讲解

主要应用背景图片居中的原理。

此技术如果应用到画廊时，会大大增加链接请求数量。

方法一演示

方法二：定位

The HTML Code:

<div class="wrapToCenter">
     <img src="images/g101.gif"/>     
</div>
<div class="wrapToCenter">   
     <img src="images/g161.gif"/>         
</div>

The CSS Code:

.wrapToCenter{margin:10px;background:#FFECEC url(images/g1001cc2.gif) no-repeat center center; border:1px solid #666;}
.wrapToCenter{height:300px; width:300px; position:relative;}
   .wrapToCenter img{ 
    position:absolute;
	left:50%;
	top:50%;
/*	margin-left:-50px;
	margin-top:-50px;*/
 
   	margin-left:-80px;
	margin-top:-80px;
   }

技术讲解

主要应用了元素定位的原理，再加上外边距的上和左来微调位置。

position:relative和position:absolute是高消耗的CSS。此方法太伤神，维护成本太高。

方法二演示

方法三：display:table-cell; 和字体大小

The HTML Code:

<div class="wrapToCenter">    
    <img src="images/g101.gif"/>       
</div>
<div class="wrapToCenter">     
    <img src="images/g161.gif"/>        
</div>

The CSS Code:

.wrapToCenter{ margin:10px;background:#FFECEC url(images/g1001cc2.gif) no-repeat center center; border:1px solid #666; overflow:hidden;}
	.wrapToCenter{
         /*float:left;不可以浮动,不然display:table-cell;不起作用。*/
		 height:300px; width:300px;
 
		 text-align:center; /* horizontal in all browsers */
		 display:table-cell; vertical-align:middle; /* ~= valign=center in CSS2 browsers */ 
	 }
	.wrapToCenter img{ vertical-align: middle;}
	.wrapToCenter {*font-size:272px; } /* 90.5% of box height */

技术讲解

此方法最早的思想来自淘宝团队想出的图片垂直居中的方法，这个吗?无法追究其根源。

此方法主要应用了两个技术要点：

display:table-cell; vertical-align:middle; 组合就可以实现垂直居中，必须是支持CSS2的浏览器才可以。
通过文字大小控制IE下图片垂直居中，文字大小的计算方法：90.5% of box height 。

注意：此方法不可以浮动，如果要想浮动布局，必须用多余的标签再次包装一下。

方法三演示

方法四：空白元素 + display:table-cell;

The HTML Code:

<div class="wrapToCenter">
     <span></span>
     <img src="images/g101.gif"/> 
</div>
<div class="wrapToCenter">
     <span></span>
     <img src="images/g161.gif"/> 
</div>

The CSS Code:

.wrapToCenter{/* float:left; 不可以浮动,不然display:table-cell;不起作用。*/ margin:10px;background:#FFECEC url(images/g1001cc2.gif) no-repeat center center; border:1px solid #666;}
.wrapToCenter{ height:300px; width:300px; text-align:center; display:table-cell; vertical-align:middle;}
.wrapToCenter *{ vertical-align: middle;}
.wrapToCenter span{ *display:inline-block;*height: 100%;/*for ie6 and ie7*/}

技术讲解

关键技术同上，只不过多使用了一个空白元素，来代替“通过文字大小控制IE下图片垂直居中”。vertical-align:middle属性会让图片与这个高高的空白空格空间垂直居中对齐；

注意：此方法不可以浮动，如果要想浮动布局，必须用多余的标签再次包装一下。

方法四演示

方法五：使用空白元素实现垂直对齐

The HTML Code:

<div class="wrapToCenter">
     <span></span>
     <img src="images/g101.gif"/> 
</div>
<div class="wrapToCenter">
     <span></span>
     <img src="images/g161.gif"/> 
</div>

The CSS Code:

.wrapToCenter{ /*float:left; 可以浮动*/margin:10px;background:#FFECEC url(images/g1001cc2.gif) no-repeat center center; border:1px solid #666;}
.wrapToCenter{ height:300px; width:300px;text-align:center; font-size:0;}
.wrapToCenter *{vertical-align:middle;}
.wrapToCenter span{display:inline-block; height:100%;}

技术讲解

vertical-align:middle属性会让图片与这个高高的空白空格空间垂直居中对齐；去掉了兼容性不好的{display:table-cell; vertical-align:middle;}组合就可以实现垂直居中，必须是支持CSS2的浏览器才可以。

可以浮动布局。

方法五演示

测试方案六:

The HTML Code:

<!--应用情景一-->
<div class="box-inner">
     <a href="#"><img src="images/g101.gif"/></a>
     <a href="#"><img src="images/g161.gif"/></a> 
</div>
<!--应用情景二-->       
<div class="wrapToCenter"> 
     <img src="images/g101.gif"/>
     <img class="alpha_img" src="images/pixel.gif"/>
</div>
<div class="wrapToCenter"> 
     <img src="images/g101.gif"/>
     <img class="alpha_img" src="images/pixel.gif"/>
</div>

The CSS Code :

/*应用情景一*/
.box-inner a img{vertical-align:middle;}
 
/*应用情景二*/
.wrapToCenter{margin:10px;background:#FFECEC url(images/g1001cc2.gif) no-repeat center center; border:1px solid #666; }
.wrapToCenter{height:300px; width:300px;font-size:0; text-align:center; }
.wrapToCenter img{vertical-align:middle;}
.wrapToCenter .alpha_img{ height:100%; width:0;}

技术讲解

将要显示的图片与一张透明的高度100%，宽度为0像素的透明图片设置为vertical-align:middle 就可以居中。

根据vertical-align:middle只会对具有display:inline-block特征的标签元素起作用，这样相邻的图片就会居中对齐，如果只是一个图片，vertical-align:middle就只有与空格对齐了。

用display:inline的标签元素包装图片，不会影响到”相邻的图片居中对齐”，就像”应用情景一”的代码。

方法六演示

测试方案七： :after伪类+conten

The HTML Code:

<div class="wrapToCenter">
     <img src="images/g101.gif"/>       
</div>
<div class="wrapToCenter">   
     <img src="images/g161.gif"/>         
</div>

The CSS Code:

.wrapToCenter{margin:10px;background:#FFECEC url(images/g1001cc2.gif) no-repeat center center; border:1px solid #666; }
.wrapToCenter{height:300px; width:300px;font-size:0;*font-size:272px;  /* 90.5% of box height */ text-align:center; }
.wrapToCenter img{vertical-align:middle;}
.wrapToCenter:after{content:".";display:inline-block; height:100%; vertical-align:middle;}

技术讲解

用“:after伪类+content实现的图片垂直居中”是比较好的方法，与我们经常用到的清除浮动影响类似。

IE6/7不支持:after伪类，我们可以用另外的方法让图片垂直居中，通过文字大小控制IE下图片垂直居中。IE6/7就可以实现图片垂直对齐了，至于其它主流的浏览器，就用:after伪类+content内容生成一个vertical-align:middle属性的元素就可以了。

方法七演示

小结：

总之,我们一直在追求着最佳实战。

从最初的display:table-cell; + vertical-align:middle; 能实现主流浏览器的垂直居中，但是IE6,IE7是不支持diaplay:table-cell，不过用文字大小（font-size）可以修正这个BUG,同时文字大小是不能随便设置的，需要计算一下文字大小（90.5% of box height），这样才能更好的垂直居中。最后，发现浮动会使table-cell无效，图片垂直居中还是无效的。想一想……

vertical-align:middle属性只会对具有inline-block的元素起作用，还有两个vertical-align:middle属性的图片靠在一起是会垂直对齐。

后来就有了 1像素，高100%的透明图片技术，想一想……不一定是图片，只要是inline-block属性或是类似inline-block属性的元素就可以了，于是后来就使用span或是i标签等代替1像素宽的透明图片，于是节约了一次图片链接请求.

再后来，又发现宽度不一定是1像素，就是设成0，也是可以的，于是，就不用担心辅助元素错行的问题了；

再到现在，利用content内容生成技术，0宽度的实体标签用:after伪类+content生成，这样，就避免了在页面上写入辅助效果的空标签，同时借助了font-size居中方法。

参考文章：Centering (horizontally and vertically) an image in a box

参考文章：:after伪类+content内容生成经典应用举例

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

Developer ≈ Designer ≈ UI/UX , Googler, Githuber

图片(水平垂直)居中

问题

一些解决方案

方法一：透明gif图片+背景定位

The HTML Code:

The CSS Code:

技术讲解

方法二：定位

The HTML Code:

The CSS Code:

技术讲解

方法三：display:table-cell; 和字体大小

The HTML Code:

The CSS Code:

技术讲解

方法四：空白元素 + display:table-cell;

The HTML Code:

The CSS Code:

技术讲解

方法五：使用空白元素实现垂直对齐

The HTML Code:

The CSS Code:

技术讲解

测试方案六:

The HTML Code:

The CSS Code :

技术讲解

测试方案七： :after伪类+conten

The HTML Code:

The CSS Code:

技术讲解

小结：

相关推荐

文章评论已经有 0 条评论！

问题

一些解决方案

方法一 ： 透明gif图片+背景定位

The HTML Code:

The CSS Code:

技术讲解

方法二 ：定位

The HTML Code:

The CSS Code:

技术讲解

方法三 ：display:table-cell; 和 字体大小

The HTML Code:

The CSS Code:

技术讲解

方法四 ：空白元素 + display:table-cell;

The HTML Code:

The CSS Code:

技术讲解

方法五 ：使用空白元素实现垂直对齐

The HTML Code:

The CSS Code:

技术讲解

测试方案六:

The HTML Code:

The CSS Code :

技术讲解

测试方案七： :after伪类+conten

The HTML Code:

The CSS Code:

技术讲解

小结：

相关推荐

文章评论 已经有 0 条评论！

站点统计

方法一：透明gif图片+背景定位

方法二：定位

方法三：display:table-cell; 和字体大小

方法四：空白元素 + display:table-cell;

方法五：使用空白元素实现垂直对齐

文章评论已经有 0 条评论！