内容垂直居中
内容垂直居中
由 Ghostzhang 发表于 2007-01-22 20:14
在CSSPlay上看到了一个垂直居中的例子，感觉还是不错的，跟大家分享一下：
- Result
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
- HTML
<div class="holder">
<!--[if IE]><span class="edge"></span>
<![endif]-->
<!--[if IE]><span class="container"><![endif]--><img src="http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png" alt="Homework" title="Homework">测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<!--[if IE]></span>
<![endif]-->
</div>- CSS
/* @reset */
body{background-color:#FFFFFF;}
/* ==== demo ==== */
.holder {
width:740px;
height:200px;
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中IE条件注解部分的标签要用内联对象标签。
<!--[if IE]><span class="edge"></span><![endif]-->要放在内容之前。如果放在之后，内容是中文时会不能居中。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2007-01-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录