實(shí)例方式學(xué)CSS text-align怎么用
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:37:16 作者：佚名 
我要評(píng)論
我要評(píng)論網(wǎng)頁制作Webjx文章簡(jiǎn)介：水平對(duì)齊（text-align），用以設(shè)定元素內(nèi)文本的水平對(duì)齊方式。
水平對(duì)齊（text-align），用以設(shè)定元素內(nèi)文本的水平對(duì)齊方式。
1.語法
text-align具體參數(shù)如下：
語法：text-align : left |
水平對(duì)齊（text-align），用以設(shè)定元素內(nèi)文本的水平對(duì)齊方式。
水平對(duì)齊（text-align），用以設(shè)定元素內(nèi)文本的水平對(duì)齊方式。
1.語法
text-align具體參數(shù)如下：
語法：text-align : left | right | center | justify 說明：設(shè)定元素內(nèi)文本的水平對(duì)齊方式。 參數(shù)：left : 左對(duì)齊；right : 右對(duì)齊；center : 居中；justify : 兩端對(duì)齊 初始值：跟瀏覽器的設(shè)置有關(guān) 繼承性：可繼承 適用于：block元素
其各參數(shù)在瀏覽器內(nèi)的顯示如圖1所示。
圖1 水平對(duì)齊方式
前三種對(duì)齊方式都很好理解，而最后一種兩端對(duì)齊（text-align:justify）可以讓大段的文本看起來比較整齊，不過兩端對(duì)齊的表現(xiàn)可能會(huì)因?yàn)闉g覽器的不同而有所不同，如圖2所示。
圖2 不同瀏覽器對(duì)于兩端對(duì)齊的不同表現(xiàn)
2.適用于：block元素
text-align屬性只有對(duì)block元素設(shè)定才會(huì)生效。例如有如下設(shè)定：
<p style="text-align:right;"><img src="img/ddcat_anim.gif" alt="圖片" style="text-align:center;" /></p>
雖然對(duì)圖片設(shè)定了居中對(duì)齊，但是在瀏覽器內(nèi)的效果如圖3所示。
圖3 圖片與對(duì)齊方式
由圖3讀者可以看到，因?yàn)閳D片<img>默認(rèn)為inline元素，所以即使定義了“text-align:center;”，也仍然同文字一起右對(duì)齊。因此不能直接通過對(duì)圖片的設(shè)定來達(dá)到單獨(dú)圖片的對(duì)齊。
如果想讓單個(gè)圖片達(dá)到居中的效果，應(yīng)該在其外嵌套一個(gè)block元素，然后設(shè)置這個(gè)元素的對(duì)齊方式為居中對(duì)齊，如下所示：
<p style="text-align:center;"><img src="img/ddcat_anim.gif" alt="圖片" /></p>
其效果如圖4所示。
圖4 圖片居中
3.繼承性
text-align屬性是可繼承的。當(dāng)設(shè)定了某個(gè)元素的水平對(duì)齊方式以后，其子孫元素的水平對(duì)齊方式都將繼承該設(shè)定，如圖5所示。
圖5 text-align的繼承性
注意：不同瀏覽器之間的繼承略有差別。例如在Opera中，表頭<th>將不繼承右對(duì)齊，而依然居中對(duì)齊，除非對(duì)其專門定義。
由于text-align屬性的繼承性，因此在定義時(shí)候需要特別注意，如果子孫元素不希望繼承水平對(duì)齊方式，則需要再分別定義。
4.應(yīng)用：整體居中
雖然text-align用以設(shè)定文本的水平對(duì)齊方式。但是在IE中，對(duì)齊會(huì)應(yīng)用在此元素內(nèi)所有的子孫元素上，例如有如下代碼：
<div id="textAlign3" style="text-align:center;"> <p style="width:70%;">本段落會(huì)在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)居中。*/ }
此時(shí)在瀏覽器內(nèi)瀏覽，頁面內(nèi)的元素都將居中顯示，如圖7所示。
圖7 瀏覽器內(nèi)頁面整體居中
注意：此時(shí)頁面內(nèi)所有的文本都繼承<body>的的設(shè)定而居中顯示，因此實(shí)際應(yīng)用中，可以再設(shè)定wrap層的對(duì)齊方式為左對(duì)齊。
相關(guān)文章
在ie7下css居中樣式text-align:center;偏左問題解決方法
css樣式text-align:center;在ie7下偏左問題，想必有很多朋友的遇到過吧，下面有個(gè)不錯(cuò)的方法，大家可以參考下，希望對(duì)大家有所幫助2013-09-21- 在CSS中加了margin:0 auto;卻沒有效果，不能居中的問題；它的本意就是上下邊界為0，左右根據(jù)寬度自適應(yīng)！其實(shí)就是~~水平居中的意思，接下來為大家介紹下兩個(gè)典型的錯(cuò)誤引起2013-03-15
- 很久沒有寫日記了，歸根結(jié)底是很久沒有學(xué)習(xí)了，一直都在工作，一直用到margin居中，也郁悶很了很久，網(wǎng)上看了大把的問答，最后自己就著一個(gè)例子，然后研究了一下，其實(shí)div2010-06-01
CSS中使用text-align、margin：0 auto居中的示例代碼
這篇文章主要介紹了CSS中使用text-align、margin：0 auto居中的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可2020-08-17
