如何使文本在DIV+CSS布局中垂直居中--e天下网络

如何使文本在DIV+CSS布局中垂直居中

[ 来路：21kn.com 时间：2007-7-7 20:58:58 点击： ]

　　DIV+CSS布局中垂直居中的实现。

<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><p>test content</p></div>
</body>
</html>

　　演示效果：

<html><head><style>body{TEXT-ALIGN: center;}#center{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto;height:200px;background:#F00;width:400px;vertical-align:middle;line-height:200px;}</style></head><body><div id="center"><p>网页教学网,这里是垂直居中文本</p></div></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

：：：：站长友情提示：多花一分钟学点什么都好：：：：

上一篇：用CSS写出的网页动态表格交替颜色的效果下一篇：Div+CSS布局应该注重语义、注重代码的重用性！

：：热点信息：：

= = 免责声明 = =

① 欢迎转载我网所刊信息，请注明“来源：E天下网络”。
② 凡本网注明“来源：XXX（非E天下网络）”的作品，均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的，请在30日内进行。
※联系方式：Airtofly@163.com

：：推荐文章：：

Dreamweaver8创建自定义代码片

：：图像设计：：

动态图片搜索家——GIF RUNN

软件搜索利器——FileFerret

实例说明构图要讲规律

Character Builder让你尽展靓