主机格调

今天上午去面试一家大型B2C网上商城的前端开发,结果被一道要求不确定大小的图片,在固定DIV里横竖都居中的题目难到了。只记得以前看见万戈写过相关文章,但当时只是觉得自己用不到,所以没去仔细看。结果到用的时候,后悔莫及啊!我就知道水平居中的两种方法,一种是text-align:center;,另外一种是WordPress里面插入图片时用到的.aligncenter{display:block;margin-left:auto;margin-right:auto;}。可是不知道怎么垂直居中啊!

晚上搜索了好久,感觉下面三种方法可圈可点,比较适合平常的运用,所以就记录下来,下次遇见这种问题直接copy。以下代码测试IE6、7、8、chrome、FF。

方法一:

由于非IE浏览器下,display:table-cell;vertical-align:middle;就可以搞定上下居中。所以对于hack定位,是写给IE的。

CSS代码:

.box{width:500px;height:500px;background-color:#f0f0f0;margin:10px;border:1px solid #000;text-align:center;position:relative;display:table-cell;vertical-align:middle;}
.box p{*position:absolute;top:50%;left:50%;}
.box p img{*position:relative;top:-50%;left:-50%;}

HTML代码:

<div class="box">
	<p><img src="" /></p>
</div>
<div class="box">
	<p><img src="" /></p>
</div>

DEMO

点评:IE8下无border;因为有display:table-cell,所以不能定位,比如margin。

参考地址

方法二:

和方法一类似,只是处理IE时,不是用的定位,这种方法看不懂,可以去问问原作者吧,是淘宝的。

CSS代码

.box {width:500px;height:500px;background-color:#f0f0f0;margin:10px;border:1px solid #000;display:table-cell;vertical-align:middle;text-align:center;*display: block;
*font-size: 436px;/*约为高度的0.873,500*0.873 约为436*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
}
.box img{vertical-align:middle;}

HTML代码:

<div class="box">
	<img src="" />
</div>
<div class="box">
	<img src="" />
</div>

DEMO

点评:因为有display:table-cell,所以不能定位,比如margin。

参考地址

方法三:

和方法一、二完全不同,是利用空标签span高度100%,然后让图片和span一起垂直居中。

CSS代码

.box{float:left;width:500px;height:500px;background-color:#f0f0f0;margin:10px;border:1px solid #000;text-align:center;font-size:0;}
.box *{ vertical-align:middle;}
.box span{display:inline-block; height:100%;}

HTML代码:

<div class="box">
	<span></span>
	<img src="" />
</div>
<div class="box">
	<span></span>
	<img src="" />
</div>

DEMO

点评:可以定位,float、margin都可以使用,更为方便。虽然多了一个无用的span,但是不会影响后期的维护,直接去掉对应的样式表即可。

参考地址

以上三种方法,我会选择第三种。因为商城的图片横排居多,所以如果没有浮动,那是相当蛋疼的。希望自己花了的时间整理出来的代码会给大家提供帮助。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/277.html