解读淘宝的面试题-使用纯CSS实现垂直居中
2010-06-04 17:07
211 查看
原题
CSS:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。
想起了vertical-align:middle;但是不行,后来才知道还要display:table-cell;才可以,但是display:table-cell;这个在IE是没有用的,于是就想用line-height来解决,无果。
看答案:
淘宝招聘官评语:
很遗憾,这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算,高度/字体大小的比值为1.14左右时IE可实现垂直居中。
当然还有很多其他的实现方案,但需要引入额外的标签。对于流量超大的淘宝网而言,我们经过权衡,倾向于在此问题上合理的使用hack。
CSS:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。
想起了vertical-align:middle;但是不行,后来才知道还要display:table-cell;才可以,但是display:table-cell;这个在IE是没有用的,于是就想用line-height来解决,无果。
看答案:
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="简单的XHTML页面" /> <meta name="Description" content="这是一个简单的XHTML页面" /> <title>简单的XHTML页面</title> <style type="text/css"> .box {display: table-cell;vertical-align:middle;width:200px;height:200px;text-align:center;/* hack for ie */*display: block;*font-size: 175px;/* end */border: 5px solid red;} .box img {vertical-align:middle;} </style> < /head> <body> <div class="box"> <img src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/tb_m.PNG" alt="" /> </div> </body> </html>
淘宝招聘官评语:
很遗憾,这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算,高度/字体大小的比值为1.14左右时IE可实现垂直居中。
当然还有很多其他的实现方案,但需要引入额外的标签。对于流量超大的淘宝网而言,我们经过权衡,倾向于在此问题上合理的使用hack。
相关文章推荐
- html+css使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法
- 使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法?
- 使用css实现div垂直居中的示例
- 使用css属性line-height实现文字垂直居中的问题
- 使用CSS完美实现垂直居中的方法
- 使用CSS完美实现垂直居中的方法
- 使用CSS实现垂直居中
- html中div使用CSS实现水平/垂直居中的多种方式
- 使用CSS实现垂直水平居中
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
- 使用CSS实现div的水平和垂直居中
- 使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。
- 使用CSS完美实现垂直居中的方法
- 使用CSS完美实现垂直居中的方法
- 【转载】使用CSS简单实现垂直居中
- 用css实现图片垂直居中的使用技巧
- 使用CSS完美实现垂直居中的方法
- CSS实现垂直居中的几种方法
- 公司的一个面试题:如何用css让一个容器水平垂直居中?