“床”结构的写法未知高度的垂直居中

RichieLiu — Tue, 22 Dec 2009 03:11:25 +0000

解释下，所谓的“床”结构就是这样的，呃……因为我比较喜欢睡觉，一看到这个结构我就想起了床，所以就叫他床结构咯：

A1、A2都是A高度变化出来的，例子大家可以期待19楼新版首页，或者淘宝首页的“宝贝类目”这块。

简单点说这其实就是未知高度的垂直居中问题。可是在ie6下我没办法让 t(图中灰色块)有100%的高度。于是基于vertical-align:middle的垂直居中方法就不管用了。

这个写法用到了IeOnly的:writing-mode:tb-rl;这个属性，以及IE6下top:50%能正确定位到当前父容器高度的一半位置(padding-top:50%、margin-top:50%貌似不能得到这里想要的效果)

可以看到 t 被设置了高度，这个高度应该是介于 t 中文字竖排时候的高度和 A 最小高度之间的。

这中写法适合于不单独定义高度的情况，单独定义高度的话，写法就很多很多了……

刘钢的博客 - 我是UED » 垂直居中