欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS教程:水平對(duì)齊(text-align)

互聯(lián)網(wǎng)   發(fā)布時(shí)間：2008-10-17 19:27:20   作者：佚名   我要評(píng)論
　　水平對(duì)齊（text-align），用以設(shè)定元素內(nèi)文本的水平對(duì)齊方式。 　　1.語(yǔ)法 　　text-align具體參數(shù)如下： 語(yǔ)法：text-align:left|right|center|justify 說(shuō)明：設(shè)定元素內(nèi)文本的水平對(duì)齊方式。 參數(shù)：left:左對(duì)齊；right:右對(duì)齊；center:居中；justify:兩端對(duì)齊

　　水平對(duì)齊（text-align），用以設(shè)定元素內(nèi)文本的水平對(duì)齊方式。
　　1.語(yǔ)法
　　text-align具體參數(shù)如下：
語(yǔ)法：text-align:left|right|center|justify
說(shuō)明：設(shè)定元素內(nèi)文本的水平對(duì)齊方式。
參數(shù)：left:左對(duì)齊；right:右對(duì)齊；center:居中；justify:兩端對(duì)齊
初始值：跟瀏覽器的設(shè)置有關(guān)
繼承性：可繼承
適用于：block元素

　　其各參數(shù)在瀏覽器內(nèi)的顯示如圖1所示。
/web/css/text/img/text-align_01.gif
圖1水平對(duì)齊方式
　　前三種對(duì)齊方式都很好理解，而最后一種兩端對(duì)齊（text-align:justify）可以讓大段的文本看起來(lái)比較整齊，不過兩端對(duì)齊的表現(xiàn)可能會(huì)因?yàn)闉g覽器的不同而有所不同，如圖2所示。
/web/css/text/img/text-align_02.gif
圖2不同瀏覽器對(duì)于兩端對(duì)齊的不同表現(xiàn)
　　2.適用于：block元素
　　text-align屬性只有對(duì)block元素設(shè)定才會(huì)生效。例如有如下設(shè)定：
<pstyle="text-align:right;"><imgsrc="img/ddcat_anim.gif"alt="圖片"style="text-align:center;"/></p>

雖然對(duì)圖片設(shè)定了居中對(duì)齊，但是在瀏覽器內(nèi)的效果如圖3所示。
/web/css/text/img/text-align_03.gif
圖3圖片與對(duì)齊方式
　　由圖3讀者可以看到，因?yàn)閳D片<img>默認(rèn)為inline元素，所以即使定義了“text-align:center;”，也仍然同文字一起右對(duì)齊。因此不能直接通過對(duì)圖片的設(shè)定來(lái)達(dá)到單獨(dú)圖片的對(duì)齊。
　　如果想讓單個(gè)圖片達(dá)到居中的效果，應(yīng)該在其外嵌套一個(gè)block元素，然后設(shè)置這個(gè)元素的對(duì)齊方式為居中對(duì)齊，如下所示：
<pstyle="text-align:center;"><imgsrc="img/ddcat_anim.gif"alt="圖片"/></p>

　　其效果如圖4所示。
/web/css/text/img/text-align_04.gif
圖4圖片居中
　　3.繼承性
　　text-align屬性是可繼承的。當(dāng)設(shè)定了某個(gè)元素的水平對(duì)齊方式以后，其子孫元素的水平對(duì)齊方式都將繼承該設(shè)定，如圖5所示。
/web/css/text/img/text-align_05.gif
圖5text-align的繼承性
　　注意：不同瀏覽器之間的繼承略有差別。例如在Opera中，表頭<th>將不繼承右對(duì)齊，而依然居中對(duì)齊，除非對(duì)其專門定義。

　　由于text-align屬性的繼承性，因此在定義時(shí)候需要特別注意，如果子孫元素不希望繼承水平對(duì)齊方式，則需要再分別定義。
　　4.應(yīng)用：整體居中
　　雖然text-align用以設(shè)定文本的水平對(duì)齊方式。但是在IE中，對(duì)齊會(huì)應(yīng)用在此元素內(nèi)所有的子孫元素上，例如有如下代碼：
<divid="textAlign3"style="text-align:center;">
<pstyle="width:70%;">本段落會(huì)在IE內(nèi)居中顯示，而在Firefox和Opera內(nèi)居左顯示。</p>
</div>

　　其在WindowsIE6.0、Firefox2.0和Opera8.5中顯示的效果如圖6所示。
/web/css/text/img/text-align_06.gif
圖6不同瀏覽器的差別
　　讀者可以看到，<p>元素本身也居中顯示了，因此可以利用此特性來(lái)設(shè)置頁(yè)面內(nèi)容在IE內(nèi)的整體居中效果，例如有html結(jié)構(gòu)如下：
<body>
<divid=”wrap”>
<h1>頁(yè)面居中</h1>
<p>設(shè)置CSS使頁(yè)面整體居中。</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)居中。*/
}

　　此時(shí)在瀏覽器內(nèi)瀏覽，頁(yè)面內(nèi)的元素都將居中顯示，如圖7所示。
/web/css/text/img/text-align_07.gif
圖7瀏覽器內(nèi)頁(yè)面整體居中
　　注意：此時(shí)頁(yè)面內(nèi)所有的文本都繼承<body>的的設(shè)定而居中顯示，因此實(shí)際應(yīng)用中，可以再設(shè)定wrap層的對(duì)齊方式為左對(duì)齊。

相關(guān)文章

最新評(píng)論