今天做乙個專案,需要讓文字垂直居中,我已經習慣用div書寫,所以沒用**,結果遇到了不大不小的問題。、還好可以通過css來解決。
現在把常見的幾種方法總結一下。
如果要垂直居中的只有一行或幾個文字,只要讓文字的行高和容器的高度相同即可,比如:
<html
>
<
head
>
<
style
type
="text/css"
>
pstyle
>
head
>
<
body
>
<
p>
要居中的文字
p>
body
>
html
>
另一種方法和行高法很相似,它同樣適合一行或幾行文字垂直居中,原理就是利用padding將內容垂直居中,比如:
p
模擬**法其實就是用css中對元素的宣告讓塊元素像**一樣顯示,用到的css屬性有display、vertical-align等。
看下面**:
居中的文字
讓最外面名為box的div呈**樣式顯示,然後再讓box中名為content的div呈單元格顯示,並利用vertical-align:middle讓其垂直居中,這樣就模擬出來和**一樣的顯示方式,css**如下:
#box#center
但這種方法有乙個弊端,由於ie瀏覽器對高度理解會產生錯誤,所以這種方法僅對firefox有效,對ie無效,既然這樣,我們就需要找出對ie的修正方法,於是有了另外一種方法。
顧名思義,定位法是利用css定位屬性position對元素進行定位的方法,也屬於模擬方法,不過它對ie的支援還是不錯的。它的html**為:
垂直居中
這段**比上一種方法中多出了乙個名為wrap的div,它的作用是用來定位,原理就是:首先讓box出於相對定位,wrap相對box出於相對定位,位於box垂直方向的50%,再讓conter中的真正內容出於wrap垂直方向的-50%,從而製作出conter在box中垂直居中的效果,它們的css**如下:
#box#wrap
#conter
這段**無論是在ie中還是firefox中,都能正常居中了。
第四種方法是我自己目前用的方法,一般用第二種padding控制也能勉強達到要的效果。
回頭如果看到其餘的方法再總結進來。
div中內容水平垂直居中
1.div高度自適應的情況 div在不設定高度的時候,會被裡面的內容撐開,內容自動填充在div中,無論是一行內容還是多行內容,此時不需要設定垂直居中,內容自動在中間的,想要看的更直觀些,只需要加上padding元素,內容四周便會留下空白,實現水平垂直居中的效果 css 如下 demohtml 如下 ...
關於DIV垂直居中
1 單行文字在div中的垂直居中。div為可變高度 css html 2 單行文字在div中垂直居中。div為固定高度。css html 3 div在div中垂直居中 說明 儘管有css的vertical align特性,但是並不能有效解決未知高度的垂直居中問題 在乙個div標籤裡有未知高度的文字或...
div內容垂直居中對齊
css垂直居中屬性設定vertical align middle對div不起作用,例如 在div中垂直居中 執行後按鈕沒有在div中垂直居中 解決思路 如果div和按鈕的寬高都確定為具體畫素值,可以直接設定按鈕的css屬性 position relative top為 div.height butt...