武林網(wǎng)(www.companysz.com)文章簡介：水平對齊（text-align），用以設定元素內(nèi)文本的水平對齊方式。
水平對齊（text-align），用以設定元素內(nèi)文本的水平對齊方式。
1.語法
text-align具體參數(shù)如下：
語法：text-align : left | right | center | justify說明：設定元素內(nèi)文本的水平對齊方式。參數(shù)：left : 左對齊；right : 右對齊；center : 居中；justify : 兩端對齊初始值：跟瀏覽器的設置有關(guān)繼承性：可繼承適用于：block元素
其各參數(shù)在瀏覽器內(nèi)的顯示如圖1所示。
前三種對齊方式都很好理解，而最后一種兩端對齊（text-align:justify）可以讓大段的文本看起來比較整齊，不過兩端對齊的表現(xiàn)可能會因為瀏覽器的不同而有所不同，如圖2所示。
2.適用于：block元素
text-align屬性只有對block元素設定才會生效。例如有如下設定：
<p style="text-align:right;"><img src="img/ddcat_anim.gif" src="http://www.companysz.com/uploads/allimg/130809/0Z4403554_0.gif" />
注意：不同瀏覽器之間的繼承略有差別。例如在Opera中，表頭<th>將不繼承右對齊，而依然居中對齊，除非對其專門定義。
由于text-align屬性的繼承性，因此在定義時候需要特別注意，如果子孫元素不希望繼承水平對齊方式，則需要再分別定義。
4.應用：整體居中
雖然text-align用以設定文本的水平對齊方式。但是在IE中，對齊會應用在此元素內(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所示。
讀者可以看到，<p>元素本身也居中顯示了，因此可以利用此特性來設置頁面內(nèi)容在IE內(nèi)的整體居中效果，例如有html結(jié)構(gòu)如下：
<body> <div id=”wrap”><h1>頁面居中</h1><p>設置CSS使頁面整體居中。</p></div></body>
要使<div id=” wrap”>在瀏覽器內(nèi)居中，則需要設置CSS如下：
body {text-align: center; /* 在IE內(nèi)居中 */}#wrap {width: 90%; /* 設定寬度才能顯示出居中的效果。*/margin: 0 auto; /* 在Firefox及Opera等瀏覽器內(nèi)居中。*/}
此時在瀏覽器內(nèi)瀏覽，頁面內(nèi)的元素都將居中顯示，如圖7所示。
注意：此時頁面內(nèi)所有的文本都繼承<body>的的設定而居中顯示，因此實際應用中，可以再設定wrap層的對齊方式為左對齊。
新聞熱點
疑難解答
