各大闻名公司的一道css面试题-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20578 次

各大著名公司的一道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>）

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/

1 楼 windk 2011-10-25

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

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

2 楼 windk 2011-10-25

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

3 楼 windk 2011-10-25

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>