如何用DIV標籤讓內容居中顯示出來

2021-06-22 12:41:29 字數 2445 閱讀 7535

原文:

如何用div標籤讓內容居中顯示出來

html中看

nanshan 即時通訊

如何用div標籤讓內容居中顯示出來

一、單行垂直居中

如果乙個容器中只有一行文字,對它實現居中相對比較簡單,我們只需要設定它的實際高度height和所在行的高度line-height相等即可。如:

div

這段**很簡單,後面使用overflow:hidden的設定是為了防止內容超出容器或者產生自動換行,這樣就達不到垂直居中效果了。

現在我們要使這段文字垂直居中顯示!

不過在internet explorer 6及以下版本中,這和方法不支援對設定垂直居中。

二、多行未知高度文字的垂直居中

如果一段內容,它的高度是可變的那麼我們就可以使用上一節講到的實現水平居中時使用到的最後一種方法,就是設定padding,使上下的padding值 相同即可。同樣的,這也是一種「看起來」的垂直居中方式,它只不過是使文字把完全填充的一種方式而已。可以使用類似下面的**:

div

這種方法的優點就是它可以在任何瀏覽器上執行,並且**很簡單,只不過這種方法應用的前提就是容器的高度必須是可伸縮的。

現在我們要使這段文字垂直居中顯示!   

div    

三、多行文字固定高度的居中

在本文的一開始,我們已經說過css中的 vertical-align屬性只會對擁有valign特性的(x)html標籤起作用,但是在css中還有乙個display屬性能夠模 擬,所以我們可以使用這個屬性來讓模擬就可以使用vertical- align了。注意,display:table和display:table-cell的使用方法,前者必須設定在父元素上,後者必須設定在子元素上, 因此我們要為需要定位的文字再增加乙個元素:

div#wrap    

div#content

現在我們要使這段文字垂直居中顯示!   

div#wrap    

div#content    

這個方法應該是很理想了,但是不幸的是 internet explorer 6 並不能正確地理解display:table和display:table-cell,因此這種方法在internet explorer 6及以下的版本中是無效的。嗯,這讓人很鬱悶!不過我們還其它的辦法。

四、在internet explorer中的解決方案

在internet explorer 6及以下版本中,在高度的計算上存在著缺陷的。在internet explorer 6中對父元素進行定位後,如果再對子元素進行百分比計算時,計算的基礎似乎是有繼承性的(如果定位的數值是絕對數值沒有這個問題,但是使用百分比計算的基 礎將不再是該元素的高度,而從父元素繼承來的定位高度)。例如,我們有下面這樣乙個(x)html**段:

如果我們對subwrap進行了絕對定位,那麼 content也會繼承了這個屬性,雖然它不會在頁面中馬上顯示出來,但是如果再對content進行相對定位的時候,你使用的100%分比將不再是 content原有的高度。例如,我們設定了subwrap的position為40%,我們如果想使content的上邊緣和wrap重合的話就必須設 置top:-80%;那麼,如果我們設定subwrap的top:50%的話,我們必須使用100%才能使content回到原來的位置上去,但是如果我 們把content也設定50%呢?那麼它就正好垂直居中了。所以我們可以使用這中方法來實現internet explorer 6中的垂直居中:

div#wrap    

div#subwrap    

div#content

當然,這段**只能在internet exlporer 6等計算存在問題的瀏覽器中才會有作用。(不過我不解,我查閱了很多文章,不知道是因為出處相同還是什麼原因,似乎很多人都不願意去解釋internet exlporer 6中這個bug的原理,我也只是了解了一點皮毛,還要再研究)

現在我們要使這段文字垂直居中顯示!   

div#wrap    

div#subwrap    

div#content   

五、完美的解決方案

那麼我們綜合上面兩種方法就可以得到乙個完美的解決方案,不過這要用到css hack的知識。對於如果使用css hack來區分瀏覽器,你可以參考這篇「簡單css hack:區分ie6、ie7、ie8、firefox、opera」:

div#wrap    

div#subwrap    

div#content

至此,乙個完美的居中方案就產生了。

現在我們要使這段文字垂直居中顯示!   

div#wrap    

div#subwrap    

div#content   

垂直居中vertical-align的值是middle,而水平居中align的值是center,雖然同是居中但關鍵字不同。

如何讓DIV元素永遠居中顯示

做個變換選單的div居中問題搞了我幾個小時,在網上搜到的都不是很理想,終於測試出來乙個方法來,這個方法絕對有效,當你真的拿div沒辦法的時候可以試試.絕對在中間 以下是網上其他的一些方法,供參考 在div css布局中,居中問題是每個初學者都會碰到的問題 1.水平居中 舉例 如下 2.另外,經典論壇...

如何讓div中的內容垂直居中

要讓div中的內容垂直居中,無非有以下幾種方法,等我一一枚舉 如果要垂直居中的只有一行或幾個文字,那它的製作最為簡單,只要讓文字的行高和容器的高度相同即可,比如 p這段 可以達到讓文字在段落中垂直居中的效果。另一種方法和行高法很相似,它同樣適合一行或幾行文字垂直居中,原理就是利用padding將內容...

如何讓div中的內容垂直居中

一 行高 line height 法 如果要垂直居中的只有一行或幾個文字,那它的製作最為簡單,只要讓文字的行高和容器的高度相同即可,比如 p 這段 可以達到讓文字在段落中垂直居中的效果。二 內邊距 padding 法 另一種方法和行高法很相似,它同樣適合一行或幾行文字垂直居中,原理就是利用paddi...