DIV内容垂直居中

在CSSPlay上看到了一个垂直居中的例子,感觉还是不错的,跟大家分享一下:

======================CSS=======================
.holder{
width:740px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
}
/*以下样式针对IE*/
.edge{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
.container{
vertical-align:middle;
display:inline-block;
}
================================================


====================HTML=======================
<div class="holder">
<!--[if IE]><span class="edge"></span><![endif]-->
<!--[if IE]><span class="container"><![endif]--><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="Homework" title="Homework" />测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<!--[if IE]></span><![endif]-->
</div>
=================================================

代码改动了一点点。有两点必须要注意的:

HTML中IE条件注解部分的标签要用内联对象标签。
“<!--[if IE]><span class="edge"></span><![endif]-->”要放在内容之前。如果放在之后,内容是中文时会不能居中。


[本日志由 ilank 于 2007-03-08 09:34 PM 编辑]
文章来自:
引用通告: 查看所有引用 | 我要引用此文章
Tags: css
相关文章:

评论: 2 | 引用: 0 | 查看次数: 37238
  • 1
答案 [2009-02-19 10:22 AM]
    师德师风
你太有才了 [2007-03-14 00:47 AM]
ilank啊
我在pjhome.net里下载的博客好多地方都有毛病。
改又怕麻烦 重点是不知道毛病出在哪里。
可不可以把你完全修该好了的程序发给我啊?
我只求你的点头。
如果你点头了,就请发到我的邮箱里。
  [email protected]
提前谢谢你。
  • 1
发表评论
昵 称:
密 码: 游客发言不需要密码.
验证码: 验证码
内 容:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 1000 字 | UBB代码 关闭 | [img]标签 关闭