CSS佈局如何實現多行文字在固定高度容器內垂直居中

2022-01-31 17:53:23 字數 4863 閱讀 9845

1樓:匿名使用者

你具體看下這裡面的,**我給你貼出來padding上下多少畫素,你設定的高度就響應的相減

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

2樓:醒目鳥

1、將多行文字放入

塊中2、為這個塊增加一個class類,.test=【注意:這個100px是容器高度的一半,修改下。】

3、固定在容器內垂直居中

3樓:夕哲仝元槐

其中line-height行高可以讓文字垂直居中,text-align可以讓文字水平居中

4樓:

div沒辦法直接實現垂直居中

,哲中的辦法,一般是通過div的高度,設定文字與高度的距離.

另外,可以在div中套**,放文字用**來實現垂直居中

5樓:匿名使用者

外層div居中,css你可以這樣寫:

#con

多行文字垂中居中,這個就我所知好像沒有哪個屬性可以做到。不過有很多變通的方法。

樓上兩位說的都可以算是其中的方法。不過,你還可以用padding屬性。比如:

#con/*左右之所以有三個畫素,是因為貼的太近了不好看,呵呵*/

或者如果你的多行文字是包含在p元素裡的話,你也可以這樣:

#con p/*不過這個不是很適合。除非你在這個div裡只有一個段落。*/

那麼由上面的p元素,也可以改變為再一個div,也就是你在你居中的div裡再巢狀一個div,然後這個div的padding也好,margin也好,你都可以自由定義了

另外還有方法就是,藉助js。不過我覺得沒必要。

6樓:傲視群雄重出江湖

div沒辦法實現你這樣的多行自動居中,除非是你定死高度,然後設定距離。

7樓:匿名使用者

其中 line-height行高可以讓文字垂直居中,text-align可以讓文字水平居中

8樓:冼花幸荷

該產品……更加簡便……

這樣就可以了

div+css文字怎樣在自適高度下垂直居中

9樓:維灣教育培訓

css網頁佈局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等計算存在問題的瀏覽器中才會有作用。

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

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

10樓:匿名使用者

如果是固定高度則非常簡單,讓左邊和右邊的div的高度和行高的值設為一樣就行。

如果左邊和右邊的高度都不確定,一般要用到js,css實現起來很難。 不過也有辦法。參考這個頁面看看也許有幫助。

如果給左邊的div加一個**那就相當容易了。直接給**的td設定垂直居中對齊。即給td新增一條屬性:valign="middle"。 我一般這麼用的。

11樓:寂寞放縱

單行文字的話 line-height=height就可以了 比如 height:20px;line-height:20px;

多行文字要用到js指令碼

12樓:熙熙莉莉

ccvvcc cvcvvcbv

13樓:恆毅星座文化

這個 相當的難 考慮各種相容性的話 幾乎不可能實現

div 中的文字是多行的,怎樣讓他們垂直居中?

14樓:匿名使用者

單純的用css控制的話,有一下幾個方法可以解決:

1、用padding給div設定內邊距,讓文字看上去是垂直居中的2、實用table佈局,td預設情況下是垂直居中,所以在div內插入table,再在td上設定text-align:center;就能控制文字垂直居中和水平居中

3、通過給文字設定line-height來達到垂直居中的效果,比如你想div高度是height:50px;但是卻又沒設定這個屬性,那你就可以用line-height:50px;同樣達到效果

15樓:

用padding給div設定內邊距,讓文字看上去是垂直居中的

16樓:匿名使用者

必須知道div的高度,也就是說高度是一定的才能居中

不然的話沒有辦法,只能用js了

多行文字怎麼在html裡垂直居中

多行內容居中,給出一致的 padding bottom 和 padding top 就行回,例如 答 middle demo 在html中怎麼讓文字垂直居中 使文字在div中水平 和垂直居中的的css樣式為 text align center 水平居中 line height 20px 行距設為與d...

如何用css實現一段文字的兩端對齊和分散對齊

xx最美 結果 注 必須是文字,如果是數字或者abc這種要用空格分開,否則連一起。css 基礎語法 1 css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。selector 選擇器通常是您需要改變樣式的 html 元素。2 每條宣告由一個屬性和一個值組成。屬性 property 是您希望設...

在2019中如何區分段落 輸入一行文字到末尾時自動到下一行和按enter回車

一個可以看段落標記 另一個可以選擇正文內容,設定首行空2字元,這樣就能夠比較簡單分辨出是不是段落了。怎樣在word 中按回車鍵自動跳到下一行 以word 2007為例,說明抄如下 bai 1 選du中 右鍵 表zhi格屬性 2 選擇 行 取消dao 指定高度 前的勾選,選中 允許跨頁斷行 確定 回到...