這一部分我們來簡單應用一下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。
這個逐漸增加line-height導致不同頁面效果的行為，起碼可以證明單行文本確實有行高。
（在執行這些操作的時候，有些想法一閃而逝，可惜沒有抓住，只想到了這一點，慚愧。。。）
三、多行文本水平垂直居中
代碼如下：
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值相等！
