CSS文字對齊text align詳解

2022-02-21 19:35:33 字數 1517 閱讀 3293

1.語法

text-align具體引數如下:

語法:text-align : left | right | center | justify 

說明:設定元素內文字的水平對齊方式。 

引數:left : 左對齊;right : 右對齊;center :  居中;justify :  兩端對齊 

初始值:跟瀏覽器的設定有關 

繼承性:可繼承 

適用於:block元素 

其各引數在瀏覽器內的顯示如圖1所示。 

圖1 水平對齊方式 

前三種對齊方式都很好理解,而最後一種兩端對齊(text-align:justify)可以讓大段的文字看起來比較整齊,不過兩端對齊的表現可能會因為瀏覽器的不同而有所不同,如圖2所示。 

圖2 不同瀏覽器對於兩端對齊的不同表現 

2.適用於:block元素

text-align屬性只有對block元素設定才會生效。例如有如下設定: 

雖然對設定了居中對齊,但是在瀏覽器內的效果如圖3所示。 

圖3 與對齊方式 

由圖3讀者可以看到,因為

預設為inline元素,所以即使定義了「text-align:center;」,也仍然同文字一起右對齊。因此不能直接通過對的設定來達到單獨的對齊。 

如果想讓單個達到居中的效果,應該在其外巢狀乙個block元素,然後設定這個元素的對齊方式為居中對齊,如下所示: 

其效果如圖4所示。 

圖4 居中 

3.繼承性

text-align屬性是可繼承的。當設定了某個元素的水平對齊方式以後,其子孫元素的水平對齊方式都將繼承該設定,如圖5所示。 

圖5 text-align的繼承性 

注意:不同瀏覽器之間的繼承略有差別。例如在opera中,表頭將不繼承右對齊,而依然居中對齊,除非對其專門定義。 

由於text-align屬性的繼承性,因此在定義時候需要特別注意,如果子孫元素不希望繼承水平對齊方式,則需要再分別定義。 

4.應用:整體居中

雖然text-align用以設定文字的水平對齊方式。但是在ie中,對齊會應用在此元素內所有的子孫元素上,例如有如下**: 

本段落會在ie內居中顯示,而在firefox和opera內居左顯示。

其在windows ie 6.0、firefox 2.0和opera 8.5中顯示的效果如圖6所示。 

圖6 不同瀏覽器的差別 

讀者可以看到,元素本身也居中顯示了,因此可以利用此特性來設定頁面內容在ie內的整體居中效果,例如有html結構如下: 

設定css使頁面整體居中。

要使在瀏覽器內居中,則需要設定css如下: 

body  

#wrap  

此時在瀏覽器內瀏覽,頁面內的元素都將居中顯示,如圖7所示。 

圖7 瀏覽器內頁面整體居中 

注意:此時頁面內所有的文字都繼承的的設定而居中顯示,因此實際應用中,可以再設定wrap層的對齊方式為左對齊。

CSS文字對齊

文字旁邊搭配時,發現比文字靠上,原來預設的情況是頂對齊而文字底對齊,通過設定css屬性可以使得與文字對齊。設定各物件的vertical align屬性,屬性說明 baseline 將支援valign特性的物件的內容與基線對齊 sub 垂直對齊文字的下標 super 垂直對齊文字的上標 top 將支援...

CSS 文字對齊方式

方法1 單行塊級元素水平居中只用新增text align即可,如p標籤,垂直居中vertical align只適用於行內元素與單元格,所以設定行高與塊高度相同即可 text align center 方法2 普通的文字居中只要設定text align即可,但是這個設定了p標籤的寬度,則是在該寬度內進...

css基礎 文字對齊,水平對齊,垂直對齊

先說水平對齊,那首先想到的就是text align了,text align left,text align center,text align right,代表的就是左對齊,居中對齊和右對齊,需要注意的是如果有padding這類的東西在,千萬看清楚兩邊的padding值是否相 同,當你看到文字不在中...