一、固定高度的容器,单行文本垂直居中

代码如下:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单行文本垂直居中</title>
<style>
div {
width:200px;
height:80px;
background-color:cyan;
line-height:80px;
}
</style>
</head>
<body>
<div>
<p>单行文本垂直居中</p>
</div>
</body>
</html>

页面效果:

CSS line-height应用-LMLPHP

二、固定高度的容器,图像水平垂直居中

代码如下:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像水平垂直居中</title>
<style>
div {
width:350px;
height:200px;
background-color: cyan;
text-align: center;
line-height: 200px;
} img {
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"
alt="A picture" style="width:175px;height:100px" />
</div>
</body>
</html>

页面效果:

CSS line-height应用-LMLPHP

其实现原理,我们可以有两种方式解读。

第一种方式,先让隐藏文本节点垂直居中,然后图像与它垂直居中对齐。

(关于“隐藏文本节点”这个概念,出自张旭鑫大大,感兴趣的朋友可以去查看作者的文章;本博下一篇博文“CSS line-height与vertical-align:baseline”中也有相关说明。)

下面来看这段代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像水平垂直居中</title>
<style>
div {
width:350px;
height:200px;
background-color: cyan;
text-align: center;
line-height: 200px;
} span {
background-color: red;
}
</style>
</head>
<body>
<div>
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"
alt="A picture" style="width:175px;height:100px" />
<span>xxx</span>
</div>
</body>
</html>

其页面效果为:

CSS line-height应用-LMLPHP

我们知道<img>元素后面有一个隐藏文本节点,在这里,我们将它显现出来,xxx;

根据div {height:200px; line-height:200px;} 的设置,xxx作为div中的单行文本被垂直居中了;

此时vertical-align为默认值baseline,所以图像的底边与文本的基线对齐。

如果我们进一步设置img {vertical-align:middle;},就能得到图像垂直居中;如图:

CSS line-height应用-LMLPHP

然后我们在html中删掉帮助我们理解的本来是隐藏的 xxx ,就能得到图像水平垂直居中的结果。

第二种方式,先让图像与隐藏文本节点垂直居中对齐,再逐渐扩大行高,由行高撑开隐藏文本的高度,直到行高等于容器的高度,实现垂直居中。

请看如下代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像水平垂直居中</title>
<style>
div {
width:350px;
height:200px;
line-height: normal;
background-color: cyan;
text-align: center;
} img {
vertical-align:middle;
} span {
display: inline-block;
background-color: red;
}
</style>
</head>
<body>
<div>
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<span>xxx</span>
</div>
</body>
</html>

其初始页面效果:

CSS line-height应用-LMLPHP

上图为line-height:normal时的页面效果,下面我们逐渐增大line-height的值,来看看页面的变化。

(我们将span元素设置为display:inline-block,这样就能直观地看到line-height的变化过程。)

当line-height的值为80px时,其页面效果:

CSS line-height应用-LMLPHP

因为图像的height值为100px;所以当line-height的值小于100px时,图像是不会移动的。

当line-height的值为150px时,其页面效果:

CSS line-height应用-LMLPHP

当line-height的值为200px时,其页面效果:

CSS line-height应用-LMLPHP

此时line-height与height的值相等,这就是我们想要的效果。

同时,这也是line-height等于height时单行文本能够垂直居中的直观体现。

不过我们还可以继续增加line-height的值,看看有什么变化。

当line-height的值为400px时,其页面效果:

CSS line-height应用-LMLPHP

由于容器的高度是200px,而我们的文本行高是400px;从图像上看出,以xxx内容区的中点为界,上下的高度都是200px。

也就是说,行高被内容区的中点均分。

从这个角度来看待行高,就很容易理解单行文本有行高。

这也就能解释为什么height与line-height相等时文本会垂直居中;比如height为200px,line-height为200px,因为行高被内容区的中点均分,以内容区中点为界,上面100px,下面100px,文本自然就在容器的中间。

但是要注意,只是文本内容区垂直居中了,内容区的中点与文本的中点并不是一个点,文本只是近似垂直居中。

而vertical-align:middle,只是让图像的中点与文本的中点对齐,所以,图像也只是近似居中。

那么,怎么才能做到图像完美垂直居中呢?

如果只有图像,没有文本,设置font-size值为0,内容区的中点与文本的中点重合在一起,自然就能完美垂直居中。

如果既有图像,又有文本,把图像和文本都设置vertical-align:middle,让它们相互居中对齐,图像的中点就会与内容区的中点对齐,从而完美垂直居中。

然而,文本该怎么完美垂直居中呢?我也不知道。。。

三、高度不固定的容器,图像水平垂直居中

根据第二种解释,在高度不固定的容器中,让图像与隐藏文本节点垂直居中对齐,再逐渐扩大行高,由行高撑开隐藏文本的高度,随着行高的增加,当行高大于图像的高度时,就能实现图像在不定高容器中的垂直居中。

代码如下:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像水平垂直居中</title>
<style>
div {
background-color: cyan;
text-align: center;
line-height: normal;
} img {
vertical-align:middle;
}
</style>
</head>
<body>
<div>
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"
alt="A picture" style="width:175px;height:100px">
</div>
</body>
</html>

页面效果:

CSS line-height应用-LMLPHP

然后我们改变line-height的值为150px,由隐藏文本节点撑开父容器的高度,得到如下效果:

CSS line-height应用-LMLPHP

四、多行文本水平垂直居中

代码如下:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多行文本水平垂直居中</title>
<style>
div.box {
width:500px;
height:300px;
background-color: cyan;
text-align: center;
line-height: 300px;
} div.container {
display:inline-block;
vertical-align: middle;
line-height: 1.5;
width: 380px;
text-align: left;
}
</style>
</head>
<body>
<div class="box">
<div class="container">
<ul>
<li>多行文本水平垂直居中的原理与图像一样;</li>
<li>将文本用一个容器封装起来,把它当成图像看待;</li>
<li>设置display属性值为inline-block;</li>
<li>设置line-height属性值;</li>
<li>设置width属性值;</li>
<li>设置text-align属性值。</li>
</ul>
</div>
</div>
</body>
</html>

页面效果:

CSS line-height应用-LMLPHP

总结:

关于垂直居中,关键是让容器的height值与line-height值相等!

05-11 13:04