CSS教程:水平對齊(text-align)_CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
水平對齊（text-align），用以設(shè)定元素內(nèi)文本的水平對齊方式。
1.語法
text-align具體參數(shù)如下：
說明：設(shè)定元素內(nèi)文本的水平對齊方式。
參數(shù)：left : 左對齊；right : 右對齊；center : 居中；justify : 兩端對齊
初始值：跟瀏覽器的設(shè)置有關(guān)
繼續(xù)性：可繼續(xù)
適用于：block元素
其各參數(shù)在瀏覽器內(nèi)的顯示如圖1所示。
圖1 水平對齊方式
前三種對齊方式都很好理解，而最后一種兩端對齊（text-align:justify）可以讓大段的文本看起來比較整潔，不過兩端對齊的表現(xiàn)可能會因為瀏覽器的不同而有所不同，如圖2所示。
圖2 不同瀏覽器對于兩端對齊的不同表現(xiàn)
2.適用于：block元素
text-align屬性只有對block元素設(shè)定才會生效。例如有如下設(shè)定：
<p style="text-align:right;"><img src="img/ddcat_anim.gif" alt="圖片" style="text-align:center;" /></p>
雖然對圖片設(shè)定了居中對齊，但是在瀏覽器內(nèi)的效果如圖3所示。
圖3 圖片與對齊方式
由圖3讀者可以看到，因為圖片<img>默認為inline元素，所以即使定義了“text-align:center;”，也仍然同文字一起右對齊。因此不能直接通過對圖片的設(shè)定來達到單獨圖片的對齊。
假如想讓單個圖片達到居中的效果，應(yīng)該在其外嵌套一個block元素，然后設(shè)置這個元素的對齊方式為居中對齊，如下所示：
<p style="text-align:center;"><img src="img/ddcat_anim.gif" alt="圖片" /></p>
其效果如圖4所示。
圖4 圖片居中
3.繼續(xù)性
text-align屬性是可繼續(xù)的。當(dāng)設(shè)定了某個元素的水平對齊方式以后，其子孫元素的水平對齊方式都將繼續(xù)該設(shè)定，如圖5所示。
圖5 text-align的繼續(xù)性
注重：不同瀏覽器之間的繼續(xù)略有差別。例如在Opera中，表頭<th>將不繼續(xù)右對齊，而依然居中對齊，除非對其專門定義。
由于text-align屬性的繼續(xù)性，因此在定義時候需要非凡注重，假如子孫元素不希望繼續(xù)水平對齊方式，則需要再分別定義。
4.應(yīng)用：整體居中
雖然text-align用以設(shè)定文本的水平對齊方式。但是在IE中，對齊會應(yīng)用在此元素內(nèi)所有的子孫元素上，例如有如下代碼：
<div id="textAlign3" style="text-align:center;">
<p style="width:70%;">本段落會在IE內(nèi)居中顯示，而在Firefox和Opera內(nèi)居左顯示。</p>
</div>
其在Windows IE 6.0、Firefox 2.0和Opera 8.5中顯示的效果如圖6所示。
圖6 不同瀏覽器的差別
讀者可以看到，<p>元素本身也居中顯示了，因此可以利用此特性來設(shè)置頁面內(nèi)容在IE內(nèi)的整體居中效果，例如有html結(jié)構(gòu)如下：
<body>
<div id=”wrap”>
<h1>頁面居中</h1>
<p>設(shè)置CSS使頁面整體居中。</p>
</div>
</body>
要使<div id=” wrap”>在瀏覽器內(nèi)居中，則需要設(shè)置CSS如下：
body {
text-align: center; /* 在IE內(nèi)居中 */
}
#wrap {
width: 90%; /* 設(shè)定寬度才能顯示出居中的效果。*/
margin: 0 auto; /* 在Firefox及Opera等瀏覽器內(nèi)居中。*/
}
此時在瀏覽器內(nèi)瀏覽，頁面內(nèi)的元素都將居中顯示，如圖7所示。
圖7 瀏覽器內(nèi)頁面整體居中
注重：此時頁面內(nèi)所有的文本都繼續(xù)<body>的的設(shè)定而居中顯示，因此實際應(yīng)用中，可以再設(shè)定wrap層的對齊方式為左對齊。
相關(guān)CSS教程：
- 相關(guān)鏈接：
- 教程說明：
CSS教程-CSS教程:水平對齊(text-align)
。