山寨-IT民工 Eric's Blog 蓝色的海洋、自由的天空

看到淘宝UED的一个招聘题,"使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在 200px的正方形容器中水平和垂直居中。"

偶的分析,大多都知道实现已知高度图片垂直居中和水平是很容易的,给容器padding-top值为容器高度值的一半,再对图片高度给个 margin-top:-该图片高度值的一半.就垂直居中了.水平居中只要text-align:center;就ok了.应该是这样的吧...


结构:

<div class="box"><img src="1.jpg"  height="140px"/></div>


css:

<style>
.box{ 
border: 1px solid #000;
height:100px;
width:200px;
text-align:center;
padding-top:100px
}
.box img{ margin-top:-70px}
</style>


现在是未知图片高度.这个方法就没用了.但其实在火狐下还是很容易的,给容器display: table-cell;让其当作表格来处理,接着vertical-align:middle;就可以了.

而在ie下就有点小麻烦.需要使用css hack,"设置font-size可以让IE显示垂直居中,当高度/字体大小的比值为1.14左右时IE可实现垂直居中".得出结果:200 /1.14=175.438px=font-size
css:

.box {  
border: 1px solid #000;  
width:200px;    
height:200px; 
text-align:center;
display: table-cell;    
vertical-align:middle;    
*display: block;/* for ie */    
*font-size: 175px; /* for ie */   
}
.box img{ vertical-align:middle}


这是比较简单的一种实现方法.

另一道题目是:

在不使用 border 样式的情况下，画出一条一px高的横线，在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果。


如下可以兼容各个浏览器:

<div style="height:1px;overflow:hidden;background:#000"></div>


本来我想不用overflow:hidden,设置font-size:1px,结果在ie6下还是粗的.因为还是始终占据着1px的高度空间.

 

 实际应用的一段源码