今天上午去面试一家大型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代码:
点评: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代码:
点评:因为有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代码:
点评:可以定位,float、margin都可以使用,更为方便。虽然多了一个无用的span,但是不会影响后期的维护,直接去掉对应的样式表即可。
以上三种方法,我会选择第三种。因为商城的图片横排居多,所以如果没有浮动,那是相当蛋疼的。希望自己花了的时间整理出来的代码会给大家提供帮助。
一直知道确定大小的怎么垂直居中- -..话说第一种方法很好理解.第三种用到的display:inline-block貌似IE7本身不支持. 但是border属性触发了IE7的haslayout?貌似是这样..~收藏收藏..说不定以后用得上~~ 西门去瞅瞅这篇文章呗, 也许用得上~介绍inline-block的.(蓝色理想:http://www.blueidea.com/tech/web/2009/6497.asp)
说句实在话,我没有研究那么深入,只是需要的时候就用。关于haslayout看到很多,但是我也不知道这到底是什么。
那些面试的都是蛋疼的淫,很无聊的问题,其实就是看看你有没有遇到过
佩服博主的学习精神,支持一下。
面试时应该要提交相关的作品的吧,难道没有?而是用面试题考研前段设计的功底?
准确的说我应该是面试的重构,和设计没什么关系吧,又不是美工之类的工作。
😆 你又开始面试咯..
不工作,你养我?
一段时间没研究代码了,都看的不舒服了
😕 好想转载到我那儿啊,但是,不敢转了~
你又不搞代码,转载这干嘛
垂直我用 align="absmiddle" 。。水平的margin padding 什么的来解决。。
看来西门是个CSS大师啊,不知道你面试的是哪家。。
还不知道你是否在武汉读的书。
我22号到武汉。武昌。图书城。。
图书城?出版城吧?具体在哪里?我以前就在武昌省出版城附近工作。CSS菜鸟
图书城也叫,出版城也叫吧。脑子记不清了。那个鲁班奖建筑的前面也有一栋高高的建筑,有时候我就在那里。 -via phone post
如果方向错了,那么倒退就是前进。
好技术的文章,学习了!
代码的玩意儿,路过了,呵呵, 😮
看代码表示头晕,还是支持下
这挺折腾人的,题很刁钻的!
呵呵 还真是折腾人啊
来关注支持下!
收藏了···垂直居中很多时候会用到~~
好好研究吧,应聘成功了就是白领了。。。。 💡
挺有借鉴意义
font-size: 436px;这个用法太牛B了
学习了,谢谢博主,祝博主开心哈。。。
我一般会用第一种方法,在无视IE的情况下比较简单,适合我这种不会div+css的人 😈
西门兄,技术贴三连发呀 😮
➡ = =!
换个邮箱就能显示了吧。。
= =咋还是这个头像。。。 😕