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

2008-07-10 11:23:03 来源:互联网作者:编辑整理【大中小】评论：2 条

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

这就需要用到定位，而且需要给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>chinaz.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
</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>chinaz.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</p>
<p>中国站长站</p>
<p>我们努力保持每天更新，为您提供最新最全的CSS网页布局教程。</p>
</a>
</div>
</div>
</div>
</body>
</html>

评论总数：条 [ 查看全部 ] 网友评论

Chinaz.com - 中国站长站

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

Tags：CSS实例说明多行文本垂直居中

Chinaz.com - 中国站长站

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

Tags：CSS实例说明 多行文本垂直居中

Tags：CSS实例说明多行文本垂直居中