您现在的位置是:首页 >
当前栏目
内容垂直居中
内容 居中 垂直
2023-06-13 09:11:17 时间
内容垂直居中
由 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]-->
要放在内容之前。如果放在之后,内容是中文时会不能居中。
相关文章
- 不止有游戏,VR内容生态还在持续发力
- 微信小程序内容安全检测(敏感词、敏感图)
- 为什么互联网的未来是定制内容
- 四个提高 WordPress 内容管理用户体验的插件
- WordPress 技巧:设置只有注册用户才能浏览特定的内容
- Linux文件内容替换技术:实现快速更新(linux文件内容替换)
- MySQL数据库复制:快速实现表内容克隆(mysql数据库表复制)
- Linux下内容复制的简单命令指南(linux内容复制命令)
- Linux下快速打印文件夹内容(linux打印文件夹)
- 安全保障Oracle数据库内容加密机制(oracle内容加密)
- 亚马逊出手!推出Sumerian平台,可快速创建AR/VR和3D内容
- Apache内容动态缓冲模块mod_cache应用