A JavaScript Fancier

伟大的javascript技术研究中...

  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks
<2006年6月>
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

公告

本blog为作者本人学习JS脚本所用,未经特别声明,本站所有文章均属作者本人原创,请转载时注明来源!谢谢合作!同时希望与各位javascript爱好者交流学习。MSN:yanwei8410@hotmail.com

常用链接

留言簿(26)

随笔分类

随笔档案

Ajax技术站点

javascript学习站点

JS高人Blog

Ruby&&Ajax框架

Web技术站点

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


今天在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">aaaa</DIV>
<DIV CLASS="c2">bbbb<br>bbbb<br>bbbb<br>bbbb<br>bbbb<br>bbbb</DIV>
<DIV CLASS="c3">cccc<br>cccc</DIV>
<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">aaaa</DIV>
<DIV CLASS="c2">bbbb<br>bbbb<br>bbbb<br>bbbb<br>bbbb<br>bbbb</DIV>
<DIV CLASS="c3">cccc<br>cccc</DIV>
<DIV>
posted on 2006-12-20 23:51 Yemoo'S JS Blog 阅读(968) 评论(2)  编辑 收藏 引用 所属分类: HTML/XHTML/CSS
只有注册用户登录后才能发表评论。
51La