用CSS实现内容的垂直居中-教程教材教学_网页设计特效

在设计页面布局的时候，我们很可能需要到一些内容可以达到垂直居中。如果使用
<table>里面的valign属性，那很容易达到内容的垂直居中。但使用<table>
的缺点就是，你很可能就为了达到某些文本的垂直居中，就能弄一个烦人的表格框架。而现在，Verne为我们带为一个解决方法，纯CSS实现页面的垂直居中。

1.HTML代码


运行代码框
<div id="container">
<div id="position">
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, hendrerit nec, feugiat vitae, feugiat a, nisl.
</div>
</div>
</div>
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

2.CSS代码


运行代码框
<STYLE type="text/css">
#container { width: 100%; height: 100%; display: table; }
#position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }
</STYLE>
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

这串CSS代码，几乎支持所有的浏览器。呃，但是除了IE，所以，需要对IE进行一个小小的Hack.

3.对IE的Hack
<!--[if IE]><STYLE type="text/css"> #container { position: relative; } #position { position: absolute; top: 50%; } #content { position: relative; top: -50%; } </STYLE> <![endif]–>

你可以点击查看Demo或是下载示例。

用CSS实现内容的垂直居中

相关新闻

热点新闻

推荐新闻