CSS教程:水平對齊(text-align)
互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:27:20 作者：佚名 
我要評論
我要評論 水平對齊（text-align），用以設(shè)定元素內(nèi)文本的水平對齊方式。
1.語法
text-align具體參數(shù)如下：
語法：text-align:left|right|center|justify
說明：設(shè)定元素內(nèi)文本的水平對齊方式。
參數(shù)：left:左對齊；right:右對齊；center:居中；justify:兩端對齊
水平對齊（text-align），用以設(shè)定元素內(nèi)文本的水平對齊方式。
1.語法
text-align具體參數(shù)如下：
語法：text-align:left|right|center|justify
說明：設(shè)定元素內(nèi)文本的水平對齊方式。
參數(shù)：left:左對齊；right:右對齊；center:居中；justify:兩端對齊
初始值：跟瀏覽器的設(shè)置有關(guān)
繼承性：可繼承
適用于：block元素
其各參數(shù)在瀏覽器內(nèi)的顯示如圖1所示。
圖1水平對齊方式
前三種對齊方式都很好理解，而最后一種兩端對齊（text-align:justify）可以讓大段的文本看起來比較整齊，不過兩端對齊的表現(xiàn)可能會因為瀏覽器的不同而有所不同，如圖2所示。
圖2不同瀏覽器對于兩端對齊的不同表現(xiàn)
2.適用于：block元素
text-align屬性只有對block元素設(shè)定才會生效。例如有如下設(shè)定：
<pstyle="text-align:right;"><imgsrc="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è)置這個元素的對齊方式為居中對齊，如下所示：
<pstyle="text-align:center;"><imgsrc="img/ddcat_anim.gif"alt="圖片"/></p>
其效果如圖4所示。
圖4圖片居中
3.繼承性
text-align屬性是可繼承的。當設(shè)定了某個元素的水平對齊方式以后，其子孫元素的水平對齊方式都將繼承該設(shè)定，如圖5所示。
圖5text-align的繼承性
注意：不同瀏覽器之間的繼承略有差別。例如在Opera中，表頭<th>將不繼承右對齊，而依然居中對齊，除非對其專門定義。
由于text-align屬性的繼承性，因此在定義時候需要特別注意，如果子孫元素不希望繼承水平對齊方式，則需要再分別定義。
4.應(yīng)用：整體居中
雖然text-align用以設(shè)定文本的水平對齊方式。但是在IE中，對齊會應(yīng)用在此元素內(nèi)所有的子孫元素上，例如有如下代碼：
<divid="textAlign3"style="text-align:center;">
<pstyle="width:70%;">本段落會在IE內(nèi)居中顯示，而在Firefox和Opera內(nèi)居左顯示。</p>
</div>
其在WindowsIE6.0、Firefox2.0和Opera8.5中顯示的效果如圖6所示。
圖6不同瀏覽器的差別
讀者可以看到，<p>元素本身也居中顯示了，因此可以利用此特性來設(shè)置頁面內(nèi)容在IE內(nèi)的整體居中效果，例如有html結(jié)構(gòu)如下：
<body>
<divid=”wrap”>
<h1>頁面居中</h1>
<p>設(shè)置CSS使頁面整體居中。</p>
</div>
</body>
要使<divid=”wrap”>在瀏覽器內(nèi)居中，則需要設(shè)置CSS如下：
body{
text-align:center;/*在IE內(nèi)居中*/
}
#wrap{
width:90%;/*設(shè)定寬度才能顯示出居中的效果。*/
margin:0auto;/*在Firefox及Opera等瀏覽器內(nèi)居中。*/
}
此時在瀏覽器內(nèi)瀏覽，頁面內(nèi)的元素都將居中顯示，如圖7所示。
圖7瀏覽器內(nèi)頁面整體居中
注意：此時頁面內(nèi)所有的文本都繼承<body>的的設(shè)定而居中顯示，因此實際應(yīng)用中，可以再設(shè)定wrap層的對齊方式為左對齊。
相關(guān)文章
- 你對CSS層疊和繼承的概念和用法你是否熟悉，這里和大家分享一下，文檔中的一個元素可能同時被多個CSS選擇器選中，每個選擇器都有一些CSS規(guī)則，這就是層疊，而所謂繼承，就2011-01-27
- 我們知道文檔中的一個元素可能同時被多個css選擇器選中，每個選擇器都有一些css規(guī)則，這就是層疊。所謂繼承，就是父元素的規(guī)則也會適用于子元素。2010-03-14
- 下面小編就為大家?guī)硪黄狢SS默認可繼承樣式詳解。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-06
- 這篇文章主要介紹了CSS中的繼承,是CSS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-07-16
CSS教程:學習CSS的繼承性-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
所謂CSS的繼承是指被包在內(nèi)部的標簽將擁有外部標簽的樣式性質(zhì)。繼承特性最典型的應(yīng)用通常發(fā)揮在整個網(wǎng)頁的樣式預(yù)設(shè)，需要指定為其它樣式的部份設(shè)定在個別元素里即可。這項2008-10-17CSS樣式表中繼承關(guān)系的空格與不空格-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
這可能是一個非常簡單的問題，但是今天花一點點時間把這個簡單的問題在說清晰一點，相信大家對ＣＳＳ的學習和認識會很有幫助，強化一些概念的東西，對以后的工作效率的2008-10-17CSS教程:line-height屬性的繼承-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
原文：http://www.planabc.net/2008/07/25/unitless-line-heights/ 淘寶商城的detail 頁面“產(chǎn)品詳情”部分是商家自定義區(qū)塊，曾出現(xiàn)這樣一個問題： &2008-10-17CSS教程：行高line-height屬性(2)-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
相關(guān)文章：CSS教程：行高line-height屬性(1) 7.3.3行高的計算與繼承 以em、ex和百分比為單位的行高，其基數(shù)是元素本身的字體尺寸。例如有代碼如下： <pstyle=&quo2008-10-17CSS教程：理解繼承屬性及應(yīng)用-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
4.5繼承 在本書的[3.3.2繼承與層疊]一節(jié)曾經(jīng)簡要介紹過繼承：(X)HTML元素可以從其父元素那里繼承部分CSS屬性，即使當前元素并沒有定義該屬性。 4.5.1值的繼承 繼承也是2008-10-17- 下面小編就為大家?guī)硪黄钊肜斫釩SS定位與層疊。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-15