热门关键字: jsp web pl/sql pl webwor   →开发工具  操作系统
当前位置 : 无忧IT编程网 > WEB开发 > CSS样式 > 正文

一行、多行文本垂直居中的CSS实例说明

来源:转载作者:51itcn时间:08-07-30

在表格布局时代,不需要过多的考虑垂直居中的问题,在单元格中,默认就是垂直居中的,一行文字是垂直居中,三行文字同样也会垂直居中。进行CSS网页布局,这样的形式改变了。文字默认是居于容器顶部。

如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chinaz.com</title>
<style type="text/css">
#MrJin {
 width:500px;
 height:200px;
 border:1px solid #03c;
 text-align:center;
}
</style>
</head>
<body>
<div id="MrJin"><a href="http://www.chinaz.com/">CSS Web Design</a></div>
</body>
</html>

在这样的情况下,如何实现文字垂直居中呢。分为三种情况:

一、如果是单行文本,可以用行距来解决问题。

我们为它增加行距的定义,得到单行文本垂直居中的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chinaz.com</title>
<style type="text/css">
#MrJin {
 width:500px;
 height:200px;
 border:1px solid #03c;
 text-align:center;
 line-height:200px;
}
</style>
</head>
<body>
<div id="MrJin"><a href="http://www.chinaz.com/">CSS Web Design </a></div>
</body>
</html>


二、如果是多行文本,父容器不固定高度。

我们可以用padding来解决问题。

设置容器的padding上下为相同的固定值,容器的高度随着内容的增加而增加。

以此来实现多行文本的垂直居中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chinaz.com</title>
<style type="text/css">
#MrJin {
 width:500px;
 padding:50px 0;
 border:1px solid #03c;
 text-align:center;
}
</style>
</head>
<body>
<div id="MrJin"><p><a href="http://www.chinaz.com/">CSS Web Design </p><p>我们致力于为中文网站提供动力!</a></p></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chinaz.com</title>
<style type="text/css">
#MrJin {
 width:500px;
 padding:50px 0;
 border:1px solid #03c;
 text-align:center;
}
</style>
</head>
<body>
<div id="MrJin"><a href="http://www.chinaz.com/">
<p>CSS Web Design</p>
<p>中国站长站</p>
<p>我们致力于为中文网站提供动力!</p>
</a></div>
</body>
</html>

最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 验证码: 验证码
查看所有评论
站长推荐