CSS 布局 - 水平 & 垂直對齊
水平 & 垂直居中對齊
元素居中對齊
要水平居中對齊一個元素(如 <div>), 可以使用 margin: auto;。
設置到元素的寬度將防止它溢出到容器的邊緣。
元素通過指定寬度,併將兩邊的空外邊距平均分配:
div 元素是居中的
注意: 如果沒有設置 width 屬性(或者設置 100%),居中對齊將不起作用。
文本居中對齊
如果僅僅是為了文本在元素內居中對齊,可以使用 text-align: center;
文本居中對齊
提示: 更多文本對齊實例,請參閱 CSS 文本 章節。
圖片居中對齊
要讓圖片居中對齊, 可以使用 margin: auto; 併將它放到 塊 元素中:
左右對齊 - 使用定位方式
我們可以使用 position: absolute; 屬性來對齊元素:
教程 -- 學的不僅是技術,更是夢想!!!
實例
嘗試一下 »
注釋:絕對定位元素會被從正常流中刪除,併且能夠交叠元素。
提示: 當使用 position 來對齊元素時, 通常 <body> 元素會設置 margin 和 padding 。 這樣可以避免在不同的瀏覽器中出現可見的差異。
當使用 position 屬性時,IE8 以及更早的版本存在一個問題。如果容器元素(在我們的案例中是 <div class="container">)設置了指定的寬度,併且省略了 !DOCTYPE 聲明,那么 IE8 以及更早的版本會在右側增加 17px 的外邊距。這似乎是為滾動條預留的空間。當使用 position 屬性時,請始終設置 !DOCTYPE 聲明:
實例
嘗試一下 »
左右對齊 - 使用 float 方式
我們也可以使用 float 屬性來對齊元素:
當像這樣對齊元素時,對 <body> 元素的外邊距和內邊距進行預定義是一個好主意。這樣可以避免在不同的瀏覽器中出現可見的差異。
注意:如果子元素的高度大於父元素,且子元素設置了浮動,那么子元素將溢出,這時候你可以使用 "clearfix(清除浮動)" 來解決該問題。
我們可以在父元素上添加 overflow: auto; 來解決子元素溢出的問題:
當使用 float 屬性時,IE8 以及更早的版本存在一個問題。如果省略 !DOCTYPE 聲明,那么 IE8 以及更早的版本會在右側增加 17px 的外邊距。這似乎是為滾動條預留的空間。當使用 float 屬性時,請始終設置 !DOCTYPE 聲明:
實例
嘗試一下 »
垂直居中對齊 - 使用 padding
CSS 中有很多方式可以實現垂直居中對齊。 一個簡單的方式就是頭部頂部使用 padding:
我是垂直居中。
如果要水平和垂直都居中,可以使用 padding 和 text-align: center:
我是水平和垂直都居中的。
垂直居中 - 使用 line-height
我是垂直居中的。
實例
嘗試一下 »
垂直居中 - 使用 position 和 transform
除了使用 padding 和 line-height 屬性外,我們還可以使用 transform 屬性來設置垂直居中:
實例
嘗試一下 »
提示: 更多 transform 屬性內容可以參閱 2D 翻轉章節。
更多實例
CSS 使用 margin 讓 div 居中對齊
CSS 使用絕對定位 讓 div 右對齊