CSS 水平對齊(Horizontal Align)
在CSS中，有幾個屬性用於元素水平對齊。
塊元素對齊
塊元素是一個元素，佔用了全寬，前後都是換行符。
塊元素的例子：
- <h1>
- <p>
- <div>
文本對齊，請參閱CSS文本章節。 .
在這一章中，我們會告訴你塊元素如何水平對齊佈局。
中心對齊,使用margin屬性
塊元素可以把左，右頁邊距設置為"自動"對齊。
Note:在IE8中使用margin:auto屬性無法正常工作，除非聲明!DOCTYPE
margin屬性可任意拆分為左，右頁邊距設置自動指定，結果都是出現居中元素：
提示:如果寬度是100％，對齊是沒有效果的。
注意： IE5中塊元素有一個margin處理BUG。為了使上述例子能工作，在IE5中，需要添加一些額外的代碼。 實例
使用position屬性設置左，右對齊
元素對齊的方法之一是使用絕對定位：
注意：絕對定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素。
Crossbrowser 兼容性問題
<p類似這樣的元素對齊時，預先確定margin和元素的填充，始終是一個好主意。 這是為了避免在不同的瀏覽器中的可視化差異。IE8和早期有一個問題，當使用position屬性時。 如果一個容器元素（在本例中<div class="container">）指定的寬度，!DOCTYPE聲明是缺失，IE8和早期版本會在右邊增添17px的margin。 這似乎是一個滾動的預留空間。 使用position屬性時始終設置在DOCTYPE聲明中！
實例
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
嘗試一下»
使用float屬性設置左，右對齊
使用float屬性是對齊元素的方法之一：
Crossbrowser兼容性問題
類似這樣的元素對齊時，預先確定margin和元素的填充，始終是一個好主意。 這是為了避免在不同的瀏覽器中的可視化差異。
IE8和早期有一個問題，當使用float屬性時。 如果一個容器元素（在本例中<div class="container">）指定的寬度，!DOCTYPE聲明是缺失，IE8和早期版本會在右邊增添17px的margin。 這似乎是一個滾動的預留空間。 使用float屬性時始終設置在DOCTYPE聲明中！
實例
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
嘗試一下»