實例方式學(xué)CSS text-align怎么用

2024-07-11 08:24:19

字體：大中小

供稿：網(wǎng)友

水平對齊（text-align），用以設(shè)定元素內(nèi)文本的水平對齊方式。
水平對齊（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所示。
實例方式學(xué)CSS text-align怎么用

圖1 水平對齊方式
前三種對齊方式都很好理解，而最后一種兩端對齊（text-align:justify）可以讓大段的文本看起來比較整齊，不過兩端對齊的表現(xiàn)可能會因為瀏覽器的不同而有所不同，如圖2所示。
實例方式學(xué)CSS text-align怎么用

圖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所示。
實例方式學(xué)CSS text-align怎么用

圖3 圖片與對齊方式
由圖3讀者可以看到，因為圖片<img>默認(rèn)為inline元素，所以即使定義了“text-align:center;”，也仍然同文字一起右對齊。因此不能直接通過對圖片的設(shè)定來達(dá)到單獨圖片的對齊。
如果想讓單個圖片達(dá)到居中的效果，應(yīng)該在其外嵌套一個block元素，然后設(shè)置這個元素的對齊方式為居中對齊，如下所示：
<p style="text-align:center;"><img src="img/ddcat_anim.gif" alt="圖片" /></p>
其效果如圖4所示。
實例方式學(xué)CSS text-align怎么用