CSS 水平對齊 (Horizontal Align)

CSS 水平對齊 (Horizontal Align)

關(guān)于 CSS 中元素的水平對齊 (Horizontal Align)，你可以使用多種屬性來進(jìn)行設(shè)置。

塊元素對齊

塊元素是一個(gè)元素，占用了全寬，前后都是換行符。

塊元素的例子：

• <h1>
• <p>
• <div>

文本對齊，請參閱 CSS文本 章節(jié)。.

在這一章中，我們會告訴你塊元素如何水平對齊布局。

中心對齊,使用margin屬性

塊元素可以把左，右頁邊距設(shè)置為"自動(dòng)"對齊。

Note: 在IE8中使用margin:auto屬性無法正常工作，除非聲明 !DOCTYPE

margin屬性可任意拆分為左，右頁邊距設(shè)置自動(dòng)指定，結(jié)果都是出現(xiàn)居中元素：

提示: 如果寬度是 100％，對齊是沒有效果的。

注意：IE5 中塊元素有一個(gè) margin 處理 BUG。為了使上述例子能工作，在 IE5 中，需要添加一些額外的代碼。 

使用 position 屬性設(shè)置左，右對齊

元素對齊的方法之一是使用絕對定位：

注意：絕對定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素。

使用 float 屬性設(shè)置左，右對齊

使用 float 屬性是對齊元素的方法之一：

使用 Padding 設(shè)置垂直居中對齊

CSS 中一個(gè)簡單的設(shè)置垂直居中對齊的方式就是頭部頂部使用 padding:

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

Crossbrowser 兼容性問題

類似這樣的元素對齊時(shí)，預(yù)先確定 margin 和元素的填充，始終是一個(gè)好主意。這是為了避免在不同的瀏覽器中的可視化差異。

IE8 和早期有一個(gè)問題，當(dāng)使用 float 屬性時(shí)。如果一個(gè)容器元素（在本例中<div class="container">）指定的寬度，!DOCTYPE 聲明缺失，IE8 和早期版本會在右邊增添 17px 的 margin。這似乎是一個(gè)滾動(dòng)的預(yù)留空間。使用 float 屬性始終設(shè)置在 DOCTYPE 聲明中！