CSS div文字垂直居中

2021-08-07 14:45:14 字數 1122 閱讀 1077

問題:vertical-align,在div中設定文字垂直居中,是不起作用的。那怎麼樣設定div的文字垂直居中哦!

關於"css文字垂直居中"的文章在網上可以找到很多,它們主要涉及3種方法:

1、單行文字垂直居中:

方法:把文字段落高度(line-height)和所在區域高度(height)設為一致即可。

缺點:這種方法只對單行文字有效。

**:**開發日誌

2、多行文字垂直居中:

方法: 不設區域高度(讓高度自適應), 然後在區域上下位置使用相同的填充控制,即使用padding屬性。

缺點:對固定高度的區間無效。

**:本部落格用於記錄**開發的點點滴滴。包括**設計,程式設計指南,資源和靈感。

本站的文章大都是原創或者翻譯作品。

3、瀏覽器居中:

方法: 設定position屬性為絕對(absolute), 然後把在上方留下瀏覽器高度一半減去文字區域高度一半的距離,例如文字區域高度為瀏覽器高度的20%,那麼上方應該留下50%-10%=40%;同理,在左邊留下瀏覽器寬度一半減去文字區域寬度一半的距離。

缺點:這種方法只是讓文字在落在瀏覽器**,而並非在某個特定區域的中間。

4、由於上面的三種方法都存在缺點,因此它們往往不是你所想要的方案。在實際運用中,你可能需要在讓多行文字在乙個特定高度的區域內垂直居中。當以上三種方法都行不通的情況下,請試試下面要介紹的css文字居中的最終方案!其實最終方案並不複雜,有點麻煩的是瀏覽器的相容性問題。因此,我們必須建立2套css樣式方案:

.outer

.middle  

/*下面的css是針對ie7,ie6*/

這裡我們需要定義三個div:

外層(outer) 可以根據需要定義高度、寬度,但是display必須為table。 

中間層(middle) 可以有特定的css樣式,例如:margin-left,但是display必須為table-cell,vertical-align必須為middle。 

內層(inner) 主要是用來對付ie6和ie7的(注意:ie8支援table-cell居中,所以無需hack)。 

有了上面的css,html**可以這麼寫:

把你要居中的文字放在這裡

這是第二行

...

css div垂直居中

在說到這個問題的時候,也許有人會問css中不是有vertical align屬性來設定垂直居中的嗎?即使是某些瀏覽器不支援我只需做少許的css hack技術就可以啊!所以在這裡我還要囉嗦兩句,css中的確是有vertical align屬性,但是它只對 x html元素中擁有valign特性的元素才...

css div中 垂直居中

line 1.使用line height 在div高度固定的情況下,並且不會換行的時候可以用。注 如果出現換行,那麼每一行都有容器那麼高 boxlineline 備註 img雖然是inline block,有時候會發現並沒有跟著span一起居中 如上 這是因為vertical align屬性導致的需...

css div 文字居中問題

在說到這個問題的時候,也許有人會問css中不是有vertical align屬性來設定垂直居中的嗎?即使是某些瀏覽器不支援我只需做少許的css hack技術就可以啊!所以在這裡我還要囉嗦兩句,css中的確是有vertical align屬性,但是它只對 x html元素中擁有valign特性的元素才...