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

    本文摘自52CSS.COM
    在表格布局时代，不需要过多的考虑垂直居中的问题，在单元格中，默认就是垂直居中的，一行文字是垂直居中，三行文字同样也会垂直居中。进行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>52css.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.52css.com/">CSS Web Design 我爱CSS - 52CSS.com</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>52css.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.52css.com/">CSS Web Design 我爱CSS - 52CSS.com</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>52css.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.52css.com/">CSS Web Design 我爱CSS - 52CSS.com</p><p>我爱CSS致力于Web标准在中国的应用及发展</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>52css.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.52css.com/">
<p>CSS Web Design 我爱CSS - 52CSS.com</p>
<p>我爱CSS致力于Web标准在中国的应用及发展</p>
<p>我们努力保持每天更新，为您提供最新最全的CSS网页布局教程。</p>
</a></div>
</body>
</html>

三、如果是多行文本，父容器固定高度。

    这就需要用到定位，而且需要给HTML增加标签。我们不提倡这样做。
    但目前这个方法可以更好的解决问题。
    在容器的内部需要增设两个容器，来实现这样的效果。
    MrJin、MrJin_a和MrJin_b的设置分别如下：

#MrJin {    
    position:static;
    *position:relative;    
    height:300px;
    width:500px;
    border:1px solid #03c;
    *display:block!important;
    display:table!important;
}
#MrJin_a {
    position:static;
    *position:absolute;
    display:table-cell;
    vertical-align:middle;
    *display:block;
    top:50%;
    width:100%;
}
#MrJin_b {
    position:relative;
    top:-50%;
    text-align:center;
    width:100%;
}

这样设置以后，不管容器内的文本是一行，还是多行，都将会实现垂直居中对齐。

<!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>52css.com</title>
<style type="text/css">
#MrJin {    
    position:static;
    *position:relative;    
    height:300px;
    width:500px;
    border:1px solid #03c;
    *display:block!important;
    display:table!important;
}
#MrJin_a {
    position:static;
    *position:absolute;
    display:table-cell;
    vertical-align:middle;
    *display:block;
    top:50%;
    width:100%;
}
#MrJin_b {
    position:relative;
    top:-50%;
    text-align:center;
    width:100%;
}
</style>
</head>
<body>
<div id="MrJin">
<div id="MrJin_a">
<div id="MrJin_b">
<a href="http://www.52css.com/">
CSS Web Design 我爱CSS - 52CSS.com
</a>
</div>
</div>
</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>52css.com</title>
<style type="text/css">
#MrJin {    
    position:static;
    *position:relative;    
    height:300px;
    width:500px;
    border:1px solid #03c;
    *display:block!important;
    display:table!important;
}
#MrJin_a {
    position:static;
    *position:absolute;
    display:table-cell;
    vertical-align:middle;
    *display:block;
    top:50%;
    width:100%;
}
#MrJin_b {
    position:relative;
    top:-50%;
    text-align:center;
    width:100%;
}
</style>
</head>
<body>
<div id="MrJin">
<div id="MrJin_a">
<div id="MrJin_b">
<a href="http://www.52css.com/">
<p>CSS Web Design 我爱CSS - 52CSS.com</p>
<p>我爱CSS致力于Web标准在中国的应用及发展</p>
<p>我们努力保持每天更新，为您提供最新最全的CSS网页布局教程。</p>
</a>
</div>
</div>
</div>
</body>
</html>
Tag标签: Css
posted @ 2008-07-09 16:46 Lowdens 阅读(139) 评论(1)  编辑 收藏 网摘

  回复  引用  查看    
#1楼 2008-07-09 19:48 | 2008年的梦想      
最好是把效果能贴上去看一下。这样比较专业。

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-07-09 16:48 编辑过
Google站内搜索



相关文章:


相关搜索:
Css

相关链接:

最新IT新闻:
Google操作系统已开始内部测试？
Google阅读器界面升级 全新改版
微软官方下载：Windows Vista SP2 Beta测试版
微软发布PC Live单机游戏客户端
Firefox遭“独家”恶意软件攻击