使未知高度元素内的内容垂直居中的办法

今天在51js上看到这个问题，他的代码是这样的：

<STYLE TYPE="text/css">
div.Item {
width: 305px;
height: 0px;
}
div.Item div.c1 {
width:100px;
height:100%;
float:left;
background-color:red;
}
div.Item div.c2 {
width:100px;
height:100%;
float:left;
background-color:blue;
}
div.Item div.c3 {
width:100px;
height:100%;
background-color:green;
}
STYLE>
<DIV CLASS="Item">
<DIV CLASS="c1">aaaaDIV>
<DIV CLASS="c2">bbbb<br>bbbb<br>bbbb<br>bbbb<br>bbbb<br>bbbbDIV>
<DIV CLASS="c3">cccc<br>ccccDIV>
<DIV>

由于高度不固定，所以无法使用line-height属性来使内容垂直居中。对于这个问题，有人使用脚本解决了，也就是：内容.上边距 = (总高度-内容高度)/2。
但偶测试发现使用css也完全可以解决这个问题，不知道有没有什么bug，只在ie下测试了下，没有发现问题。

解决办法：为需要内容垂直居中的元素设定上下内补丁都为50%即可。

测试代码如下：

<STYLE TYPE="text/css">
div.Item {
width: 305px;
height: 0px;
}
div.Item div.c1 {
width:100px;
height:100%;
float:left;
background-color:red;
padding:50% 0px;
}
div.Item div.c2 {
width:100px;
height:100%;
float:left;
background-color:blue;
}
div.Item div.c3 {
width:100px;
height:100%;
background-color:green;
padding:50% 0px;
}
STYLE>
<DIV CLASS="Item">
<DIV CLASS="c1">aaaaDIV>
<DIV CLASS="c2">bbbb<br>bbbb<br>bbbb<br>bbbb<br>bbbb<br>bbbbDIV>
<DIV CLASS="c3">cccc<br>ccccDIV>
<DIV>

Yemoo'S JS Blog 2006-12-20 23:51 发表评论