CSS 水平對齊

2021-08-21 07:41:09 字數 977 閱讀 8267

在 css 中,可以使用多種屬性來水平對齊元素。

塊元素指的是佔據全部可用寬度的元素,並且在其前後都會換行。

塊元素的例子:

可通過將左和右外邊距設定為 "auto",來對齊塊元素。

注釋:除非已經宣告了 !doctype,否則使用 margin:auto 在 ie8 以及更早的版本中是無效的。

把左和右外邊距設定為 auto,規定的是均等地分配可用的外邊距。結果就是居中的元素:

.center

這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。

這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。

當像這樣對齊元素時,對 元素的外邊距和內邊距進行預定義是乙個好主意。這樣可以避免在不同的瀏覽器中出現可見的差異。

當使用 position 屬性時,ie8 以及更早的版本存在乙個問題。如果容器元素(在我們的案例中是 )設定了指定的寬度,並且省略了 !doctype 宣告,那麼 ie8 以及更早的版本會在右側增加 17px 的外邊距。這似乎是為滾動條預留的空間。當使用 position 屬性時,請始終設定 !doctype 宣告.

body

.container

.right

注釋:當使用 position 屬性進行對齊時,請始終包含 !doctype 宣告!如果省略,則會在 ie 瀏覽器中產生奇怪的結果。

對齊元素的另一種方法是使用 float 屬性:

.right

這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。

這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。

css 之水平居中對齊

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

CSS水平對齊示例介紹

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

CSS教程 水平對齊 text align

水平對齊 text align 用以設定元素內文字的水平對齊方式。1.語法 text align具體引數如下 語法 text align left right center justify 說明 設定元素內文字的水平對齊方式。引數 left 左對齊 right 右對齊 center 居中 justi...