IT猫扑网：您身边最放心的安全下载站！ 最新更新|软件分类|软件专题|手机版|论坛转贴|软件发布

您当前所在位置：首页 → 网络编程 → DIVCSS → 一行、多行文本垂直居中的CSS实例说明

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

时间：2015/6/28来源：IT猫扑网作者：网管联盟我要评论(0)

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

如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://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="https://www.chinaz.com/">CSS Web Design</a></div>
</body>
</html>

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://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="https://www.chinaz.com/">CSS Web Design </a></div>
</body>
</html>


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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://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="https://www.chinaz.com/">CSS Web Design </p><p>我们致力于为中文网站提供动力！</a></p></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://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="https://www.chinaz.com/">
<p>CSS Web Design</p>
<p>中国站长站</p>
<p>我们致力于为中文网站提供动力！</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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://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;

关键词标签：实例,说明,文本,垂直,

相关阅读

文章评论
发表评论

热门文章 DIV+CSS网页布局常用的一些基础知识整理DIV+CSS网页布局常用的一些基础知识整理

相关下载

人气排行 DIV CSS完美兼容IE6/IE7/FF的通用方法CSS实例：list-style-type在IE与FF中奇怪的现象解析-CSS布局实例CSS实例:通过定义渐变边框给图片加阴影CSS常用技巧之一 禁止文字自动换行网页页面设计中CSS十大注意解决用CSS控制DIV居中失效的问题css div设置float后高度不能自动增加让CSS兼容IE和Firefox的技巧集合