CSS教程 水平對齊 text align

2022-09-25 20:30:16 字數 1876 閱讀 8076

水平對齊(text-align),用以設定元素內文字的水平對齊方式。

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;」,也仍然同文字www.cppcns.com一起右對齊。因此不能直接通過對的設定來達到單獨的對齊。

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

其效果如圖4所示。

圖4居中

3.繼承性

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

圖5text-align的繼承性

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

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

4.應用:整體居中

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

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

www.cppcns.com其在windowsie6.0、firefox2.0和opera8.5中顯示的效果如圖6所示。

圖6不同瀏覽器的差別

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

設定css使頁面整體居中。

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

body

#wrap

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

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

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

本文標題: css教程:水平對齊(text-align)

本文位址:

點讚打賞

分享如果認為本文對您有所幫助請贊助本站

宣告:凡註明"本站原創"的所有文字等資料,版權均屬程式設計客棧所有,歡迎**,但務請註明出處。

標籤:教程  網頁  網頁製作  水平  

寫給剛剛接觸web標準的新人們css教程:css中的定位(position)

您可能感興趣的文章:

廣告贊助

廣告贊助

最新發布

全站最新

廣而告之

© 2018-2021 程式設計客棧 贛icp備17006162號-9

贛公網安備 36110202000251號

top

CSS 水平對齊

在 css 中,可以使用多種屬性來水平對齊元素。塊元素指的是佔據全部可用寬度的元素,並且在其前後都會換行。塊元素的例子 可通過將左和右外邊距設定為 auto 來對齊塊元素。注釋 除非已經宣告了 doctype,否則使用 margin auto 在 ie8 以及更早的版本中是無效的。把左和右外邊距設定...

css 之水平居中對齊

初學css,對各種居中很是頭疼,這裡特地整理一下.1.設定 text align 屬性 例如 測試標題1具體解釋 css屬性定義行內內容 例如文字 如何相對它的塊父元素對齊。text align並不控制塊元素自己的對齊,只控制它的行內內容的對齊 總結 1.只能用於塊級元素內容 block conta...

CSS水平對齊示例介紹

在 css 中,可以使用多種屬性來水平對齊元素。對齊塊元素 塊元素指的是佔據全部可用寬度的元素,並且在其前後都會換行。塊元素的例子 複製 如下 使用 margin 屬性來水平對齊 可通過將左和右外邊距設定為 auto 來對齊塊元素。把左和右外邊距設定為 auto,規定的是均等地分配可用的外邊距。結果...