HTML元素居中定位與尺寸拉伸_html/css

好了，下面用幾個剛剛試驗的例子把這部分知識小記一下，為日后深入學習打基礎(chǔ)。

1.水平居中

設(shè)置父元素的text-align:center就可以了。

position不是absolute也不是fixed時（也就是并未脫離文檔流），margin-left=margin-right=auto,塊級元素width不是aoto，就可實現(xiàn)水平居中。

 1 2  3  4  5 18 19 20 header21 22 container23 24 25 

2.垂直居中

如果只有 一行本文，設(shè)置容器的line-height等于容器height。

 #container{ border: 1px solid blue; margin:0 auto; width: 300px; height: 300px; text-align: center; line-height: 300px; } 

如果是 多行文本至少要再加一個容器box把文本包起來，可以設(shè)置box的margin或者其父容器的margin。另一個方法就是使用vertical-align屬性，但這個屬性只對表格元素有效，所以需要設(shè)置box父元素display:table，設(shè)置box的display:table-cell。

要借助position和left、top幾個屬性。top表示向下平移，其他同理。position屬性有四個值：

static： 靜態(tài)定位，默認值，在文檔流中不移動，此時top等屬性無效。

relative：相對定位，相對自己原本位置定位，不脫離文檔流。

absolute：絕對定位，相對非static父元素定位，脫離文檔流（原來位置被別人占了）。

fixed：固定定位，相對瀏覽器窗口定位，也脫離文檔流，總用做購物車廣告等。

如果要垂直居中的元素設(shè)置成絕對定位，top和left在按容器和居中元素大小設(shè)置一下就可以了， 但前提是父元素是非static的。就像下面這樣。

      header content 

換幾種情況考慮，如果居中元素是相對定位的，就不要求父元素是非static的了。這固然好，但限制是不方便計算偏移量，偏移量是相對自己原位置算的，如果居中元素上方有兄弟節(jié)點也需要考慮進去，麻煩的是如果兄弟節(jié)點大小不固定，恐怕只能用腳本動態(tài)去算了。如果居中元素是固定定位的呢？考慮了一下，使用固定定位做垂直居中沒有什么特殊的優(yōu)勢。

3.拉伸

對于行內(nèi)元素、行內(nèi)塊級元素、浮動元素、表格及絕對定位元的素：

對于塊級元素和絕對定位的元素：

      我是橫向收縮的label1 我是橫向拉伸的div1 

auto通常是默認值，我們看到的非塊級元素橫向縱向多數(shù)是收縮的，如圖中l(wèi)abel。而塊級元素div默認是橫向拉伸縱向收縮的，如圖中div1。瀏覽器通常會給元素加默認樣式，所以元素并沒有完全與瀏覽器窗口貼上，如果添加*{margin:0;padding:0;}就顯示正常了。

對于絕對定位元素：

      我是縱向拉伸的div2 

auto與100%的尺寸差別

auto意味著元素尺寸是自動調(diào)整的，width/height:100%會將元素尺寸拉伸到父元素大小，其外邊距、邊框等可能超過父元素。但table不會出現(xiàn)這種情況，因為表格的width/height規(guī)定的是table-cell的外部尺寸。

W3C的盒子模型中width/height規(guī)定的是content的尺寸，IE的盒子模型width/height規(guī)定的是含border的尺寸。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com