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

2021-06-28 16:39:59 字數 978 閱讀 1813

要讓div中的內容垂直居中,無非有以下幾種方法,等我一一枚舉:如果要垂直居中的只有一行或幾個文字,那它的製作最為簡單,只要讓文字的行高和容器的高度相同即可,比如:
p
這段**可以達到讓文字在段落中垂直居中的效果。另一種方法和行高法很相似,它同樣適合一行或幾行文字垂直居中,原理就是利用padding將內容垂直居中,比如:
p
這段**的效果和line-height法差不多。模擬**法其實就是用css中對元素的宣告讓塊元素像**一樣顯示,用到的css屬性有display、vertical-align等。 先看下面的html**:
居中顯示

參照以上html**,讓最外面名為box的div呈**樣式顯示,然後再讓box中名為content的div呈單元格顯示,並利用vertical-align:middle讓其垂直居中,這樣就模擬出來和**一樣的顯示方式,css**如下:
#wrap  #content
但這種方法有乙個弊端,由於ie瀏覽器對高度理解會產生錯誤,所以這種方法僅對firefox有效,對ie無效,既然這樣,我們就需要找出對ie的修正方法,於是有了另外一種方法。顧名思義,定位法是利用css定位屬性position對元素進行定位的方法,也屬於模擬方法,不過它對ie的支援還是不錯的。 它的html**為:
垂直居中

這段**比上一種方法中多出了乙個名為sub的div,它的作用是用來定位,原理就是:首先讓box出於相對定位,sub相對box出於相對定位,位於box垂直方向的50%,再讓content中的真正內容出於sub垂直方向的-50%,從而製作出content在box中垂直居中的效果,它們的css**如下:
#wrap #subwrap #content
這段**無論是在ie中還是firefox中,都能正常居中了。 當然,肯定還有許多垂直居中的方法,歡迎各位朋友交流補充。

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

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

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

雖然div布局已經基本上取代了 布局,但 布局和div布局仍然各有千秋,互有長處。比如 布局中的垂直居中就是div布局的一大弱項,不過好在千變萬化的css可以靈活運用,可以製作出準垂直居中效果,勉強過關。要讓div中的內容垂直居中,無非有以下幾種方法,等我一一枚舉 一 行高 line height ...

div中內容水平垂直居中

1.div高度自適應的情況 div在不設定高度的時候,會被裡面的內容撐開,內容自動填充在div中,無論是一行內容還是多行內容,此時不需要設定垂直居中,內容自動在中間的,想要看的更直觀些,只需要加上padding元素,內容四周便會留下空白,實現水平垂直居中的效果 css 如下 demohtml 如下 ...