關於垂直居中的問題

2021-07-24 07:33:12 字數 2597 閱讀 7553

在說到這個問題的時候,也許有人會問css中不是有vertical-align屬性來設定垂直居中的嗎?即使是某些瀏覽器不支援我只需做少許的css

hack技術就可以啊!所以在這裡我還要囉嗦兩句,css中的確是有vertical-align屬性,但是它只對(x)html元素中擁有valign特性的元素才生

效,例如**元素中的、、等,而像、這樣的元素是沒有valign特性的,因此使用vertical-align對它們不起

作用。 

一、單行垂直居中

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

如: 

div   

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

程。 

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

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

如果一段內容,它的高度是可變的那麼我們就可以使用上一節講到的實現水平居中時使用到的最後一種方法,就是設定padding,使上下的

padding值相同即可。同樣的,這也是一種「看起來」的垂直居中方式,它只不過是使文字把完全填充的一種訪求而已。可以使用類似下

面的**: 

div   

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

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

div

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

在本文的一開始,我們已經說過css中的vertical-align屬性只會對擁有valign特性的(x)html標籤起作用,但是在css中還有乙個display

屬性能夠模擬,所以我們可以使用這個屬性來讓模擬就可以使用vertical-align了。注意,display:table和

display:table-cell的使用方法,前者必須設定在父元素上,後者必須設定在子元素上,因此我們要為需要定位的文字再增加乙個元素:

div#wrap   

div#content   

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

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來區分瀏覽器,你可

div#wrap   

div#subwrap   

div#content   

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

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

div#wrap

div#subwrap

div#content

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

關於垂直居中問題的小結

css樣式的垂直居中一直都不太好理解,沒有直接的屬性來實現垂直居中,有乙個vertical align也只是針對於文字之間,如果我們想讓一整行的文字或者多行文字進行垂直居中,我們應該怎麼做呢?html 我是單行元素,我要進行垂直居中css p.one實現效果是 需要注意的地方是要設定line hei...

關於垂直居中

對垂直居中設定齊父級樣式 vertical align middle display table cell 同時設定 的父級display table 對垂直居中設定齊父級樣式 vertical align middle display table cell 同時設定 的父級display tabl...

關於垂直居中

做專案每次垂直居中的時候都折騰半天,在這邊稍微整理一下垂直居中我所理解的一點知識吧。1,行內元素 行內元素,比如,img,span等直接用vertical align middle,就可以搞定了。2,塊元素 垂直居中,最簡單的方式是height 20px line height 20px 讓他們相等...