CSS 布局 – 水平 & 垂直對齊

水平 & 垂直居中對齊

元素居中對齊

要水平居中對齊一個元素(如

), 可以使用 margin: auto;。

設置到元素的寬度將防止它溢出到容器的邊緣。

元素通過指定寬度，并將兩邊的空外邊距平均分配：

div 元素是居中的

實例

.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

注意: 如果沒有設置 width 屬性(或者設置 100%)，居中對齊將不起作用。

文本居中對齊

如果僅僅是為了文本在元素內居中對齊，可以使用 text-align: center;

文本居中對齊

實例

.center {
text-align: center;
border: 3px solid green;
}

提示: 更多文本對齊實例，請參閱

左右對齊 – 使用定位方式

我們可以使用 position: absolute; 屬性來對齊元素:

軟件開發網 — 學的不僅是技術，更是夢想！！！

實例

.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

注釋：絕對定位元素會被從正常流中刪除，并且能夠交疊元素。

提示: 當使用 position 來對齊元素時, 通常 元素會設置
margin 和 padding 。 這樣可以避免在不同的瀏覽器中出現可見的差異。

當使用 position 屬性時，IE8 以及更早的版本存在一個問題。如果容器元素（在我們的案例中是

）設置了指定的寬度，并且省略了 !DOCTYPE 聲明，那么 IE8 以及更早的版本會在右側增加 17px 的外邊距。這似乎是為滾動條預留的空間。當使用 position 屬性時，請始終設置 !DOCTYPE 聲明：

實例

body {
margin: 0;
padding: 0;
}

.container {
position: relative;
width: 100%;
}

.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}

左右對齊 – 使用 float 方式

我們也可以使用 float 屬性來對齊元素:

實例

.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

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