CSS line-height浅析（三）
这一部分我们来简单应用一下line-height属性。
一、单行文本垂直居中
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <style> 5 div { 6 width:200px; 7 height:80px; 8 background-color:cyan; 9 line-height:80px; 10 } 11 </style> 12 </head> 13 <body> 14 <div> 15 <p>单行文本垂直居中</p> 16 </div> 17 </body> 18 </html>
页面效果：
二、图像水平垂直居中
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <style> 5 div { 6 width:350px; 7 height:200px; 8 background-color: cyan; 9 text-align: center; 10 line-height: 200px; 11 } 12 img { 13 vertical-align: middle; 14 } 15 </style> 16 </head> 17 <body> 18 <div> 19 <img src="1.jpg" alt="A picture" style="width:175px;height:100px"> 20 </div> 21 </body> 22 </html>
页面效果：
其实现原理，我们可以有两种方式解读。
第一种方式，先让隐藏文本节点垂直居中，然后图像与它垂直居中对齐。
来看这段代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <style> 5 div { 6 width:350px; 7 height:200px; 8 background-color: cyan; 9 text-align: center; 10 line-height: 200px; 11 } 12 span { 13 background-color: red; 14 } 15 </style> 16 </head> 17 <body> 18 <div> 19 <img src="1.jpg" alt="A picture" style="width:175px;height:100px"> 20 <span>xxx</span> 21 </div> 22 </body> 23 </html>
其页面效果为：
前面我们提到过，<img>元素后面有一个隐藏文本节点，在这里，我们将它显现出来，xxx；
根据div {height:200px; line-height:200px;} 的设置，xxx作为div中的单行文本被垂直居中了；
此时vertical-align为默认值baseline，所以图像的底边与文本的基线对齐。
如果我们进一步设置img {vertical-align:middle;}，就能得到图像垂直居中；如图：
然后我们在html中删掉帮助我们理解的本来是隐藏的 xxx ，就能得到图像水平垂直居中的结果。
第二种方式，先让图像与隐藏文本节点垂直居中对齐，再逐渐扩大行高，由行高撑开隐藏文本的高度，直到行高等于容器的高度，实现垂直居中。
请看如下代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <style> 5 div { 6 width:350px; 7 height:200px; 8 background-color: cyan; 9 text-align: center; 10 } 11 img { 12 vertical-align:middle; 13 } 14 span { 15 background-color: red; 16 } 17 </style> 18 </head> 19 <body> 20 <div> 21 <img src="1.jpg" alt="A picture" style="width:175px;height:100px"> 22 <span>xxx</span> 23 </div> 24 </body> 25 </html>
其页面效果：
上图为line-height:normal时的页面效果，下面我们逐渐增大line-height的值，来看看页面的变化。
注意，因为图像的height值为100px；所以当line-height的值小于100px时，页面是没有变化的。
当line-height的值为130px时，其页面效果：
当line-height的值为170px时，其页面效果：
当line-height的值为200px时，其页面效果：
此时line-height与height的值相等，这就是我们想要的效果图。
不过我们还可以继续增加line-height的值，看看有什么变化。
当line-height的值为400px时，其页面效果：
由于容器的高度是200px，而我们的文本行高是400px；从图像上看出，以xxx内容区的中点为界，上下的高度都是200px。
也就是说，行高被内容区的中点均分。
从这个角度来看待行高，就很容易理解单行文本有行高。
这也就能解释为什么height与line-height相等时文本会垂直居中。
（在执行这些操作的时候，有些想法一闪而逝，可惜没有抓住，只想到了些，惭愧。。。）
根据第二种解释，在不定高容器中，让图像与隐藏文本节点垂直居中对齐，再逐渐扩大行高，由行高撑开隐藏文本的高度，随着行高的增加，当行高大于图像的高度时，就能实现图像在不定高容器中的垂直居中。
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <style> 5 div { 6 background-color: cyan; 7 text-align: center; 8 } 9 img { 10 vertical-align:middle; 11 } 12 </style> 13 </head> 14 <body> 15 <div> 16 <img src="1.jpg" alt="A picture" style="width:175px;height:100px"> 17 </div> 18 </body> 19 </html>
页面效果：
然后我们增加line-height:150px;由隐藏文本节点撑开父容器的高度，得到如下效果：
三、多行文本水平垂直居中
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <style> 5 div#box { 6 width:500px; 7 height:300px; 8 background-color: cyan; 9 text-align: center; 10 line-height: 300px; 11 } 12 div#container { 13 display:inline-block; 14 vertical-align: middle; 15 line-height: 1.5; 16 width: 380px; 17 text-align: left; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="box"> 23 <div id="container"> 24 <p> 25 1.多行文本水平垂直居中的原理与图像一样；<br> 26 2.将文本用一个容器封装起来，把它当成图像看待。<br> 27 3.设置display属性值为inline-block；<br> 28 4.设置line-height属性值；<br> 29 5.设置width属性值；<br> 30 6.设置text-align属性值。 31 </p> 32 </div> 33 </div> 34 </body> 35 </html>
页面效果：
总结：
关于垂直居中，关键是让容器的height值与line-height值相等！