在 css 中，可以使用多種屬性來水平對齊元素。
對齊塊元素
塊元素指的是佔據全部可用寬度的元素，並且在其前後都會換行。
塊元素的例子：
複製**
**如下:
使用 margin 屬性來水平對齊
可通過將左和右外邊距設定為 "auto"，來對齊塊元素。
把左和右外邊距設定為 auto，規定的是均等地分配可用的外邊距。結果就是居中的元素：
例項複製**
**如下:
.center
使用 position 屬性進行左和右對齊
對齊元素的方法之一是使用絕對定位：
例項複製**
**如下:
.right
注釋：絕對定位元素會被從正常流中刪除，並且能夠交疊元素。
跨瀏覽器相容性程式設計客棧問題
當像這樣對齊元素時，對 元素的外邊距和內邊距進行預定義是乙個好主意。這樣可以避免在不同的瀏覽器**現可見的差異。
當使用 position 屬性時，ie8 以及更早的版本存在乙個問題。如果容器元素（在我們的案例中是 程式設計客棧 class="container">）設定了指定的寬度，並且省略了 !doctype 宣告，那麼 ie8 以及更早的版本會在右側增加 17px 的外邊距。這似乎是為滾動條預留的空間。當使用 position 屬性時，請始終設定 !doctype 宣告：
例項複製**
**如下:
body
.container
.right
使用 float 屬性來進行左和右對齊
對齊元素的另一種方法是使用 float 屬性：
例項複製**
**如下:
.right
跨瀏覽器相容性問題
當像這樣對齊元素時，對 元素的外邊距和內邊距進行預定義是乙個好主意。這樣可以避免在不同的瀏覽器**現可見的差異。
當使用 float 屬性時，ie8 以及更早的版本存在乙個問題。如果省略 !doctype 宣告，那麼 ie8 以及更早的版本會在右側增加 17px 的外邊距。這似乎是為滾動條預留的空間。當使用 float 屬性時，請始終設定 !doctype 宣告：
例項複製**
**如下:
body
.right
本文標題: css水平對齊示例介紹
本文位址: /web/css/81258.html
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
標籤：css 水平對齊
css設定向量圖字型圖示的方法(**)css中overflow:scroll怎麼設定只上下滾動而不左右滾動
CSS 水平對齊
在 css 中，可以使用多種屬性來水平對齊元素。塊元素指的是佔據全部可用寬度的元素，並且在其前後都會換行。塊元素的例子 可通過將左和右外邊距設定為 auto 來對齊塊元素。注釋 除非已經宣告了 doctype，否則使用 margin auto 在 ie8 以及更早的版本中是無效的。把左和右外邊距設定...
css 之水平居中對齊
初學css,對各種居中很是頭疼,這裡特地整理一下.1.設定 text align 屬性 例如 測試標題1具體解釋 css屬性定義行內內容 例如文字 如何相對它的塊父元素對齊。text align並不控制塊元素自己的對齊，只控制它的行內內容的對齊 總結 1.只能用於塊級元素內容 block conta...
CSS教程 水平對齊 text align
水平對齊 text align 用以設定元素內文字的水平對齊方式。1.語法 text align具體引數如下 語法 text align left right center justify 說明 設定元素內文字的水平對齊方式。引數 left 左對齊 right 右對齊 center 居中 justi...