DIV内容垂直居中
作者:ilank 日期:2007-03-08
在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]-->”要放在内容之前。如果放在之后,内容是中文时会不能居中。
======================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]-->”要放在内容之前。如果放在之后,内容是中文时会不能居中。
评论: 2 | 引用: 0 | 查看次数: 47335
- 1
答案 [2009-02-19 10:22 AM]
师德师风
ilank啊
我在pjhome.net里下载的博客好多地方都有毛病。
改又怕麻烦 重点是不知道毛病出在哪里。
可不可以把你完全修该好了的程序发给我啊?
我只求你的点头。
如果你点头了,就请发到我的邮箱里。
85068408@163.com
提前谢谢你。
我在pjhome.net里下载的博客好多地方都有毛病。
改又怕麻烦 重点是不知道毛病出在哪里。
可不可以把你完全修该好了的程序发给我啊?
我只求你的点头。
如果你点头了,就请发到我的邮箱里。
85068408@163.com
提前谢谢你。
- 1
发表评论