各大著名公司的一道css面试题

前言：

 

其实这道题很久之前了，但是有同学最近再次遇到了就说说吧，简单记录一下。

 

虽然个人觉得过于考试化，但是还是很能看出你的css功底和广度（遇到查过记录过）

 

 

题目：

 

 

使用CSS实现未知尺寸的图片在已知容器中水平和垂直居中。

 

 

html

 

 

<div class="container">
   <img src="" alt="" />
</div>

 

 

css 

 

 

.container{
    border:1px solid #000;
    width:180px;
    height:180px;
    line-height:180px;
    text-align:center;    //水平居中
    display:table-cell;
    vertical-align:middle;
    *font-size:157px;   // 高度*0.873的算法
}

.container img{
   vertical-align:middle;  //图片垂直居中
}

 

 简单地补充一些hack的知识：

 

1。 关于 *

IE都能识别*;标准浏览器(如FF)不能识别*；

   IE6能识别*，但不能识别 !important, 
   IE7能识别*，也能识别!important; 
   FF不能识别*，但能识别!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

 

 

2。 关于display: table-cell

 

 

table-cell

此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

 

浏览器支持上IE8+以及其他的主流浏览器（IE6和7不支持）

 

 

 

扩展阅读参考：

 

1. http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

2. http://www.wufangbo.com/css-vertical-and-horizontal-center

3. http://www.planabc.net/2008/05/26/img_vertical_center_solution/

评论

3 楼 windk 2011-10-25  

说错了,纠正下, vertical-align 是只对 inline 元素 和 inline-block元素起作用.
div是 block 类型的. 所以为他添加这个属性是不起作用的.

2 楼 windk 2011-10-25  

另外 display:table-cell; 在ie7 及以下是不被支持的.
.container 的 vertical-align:middle;  是没有用的,
因为 vertical-align这个属性只对block元素 和 inline-block 元素起作用.

1 楼 windk 2011-10-25  

博主你好,
我用你给的代码做了一个实验,确实可以实现 已知容器,未知图片的居中,但是对table-cell还是不清楚.

能否解释下
display:table-cell;
这个属性的作用呢?