大小不固定,多行文字的垂直居

2021-07-31 15:31:10 字數 1565 閱讀 9972

(1)、垂直居中-父元素高度確定的單行文字

設定父元素的height和line-height高度一致
注:

height是指該元素的高度,line-height是指行間距。
line-height與font-size的計算值之差,在css成為行間距,分為兩半,分別加到乙個文字行內容的頂部和底部。
弊端:

當文字長度大於塊的寬度時,就有內容脫離了塊。
(自己想的)另外:

對於單行文字,要想設定合理的行間距和元素高度,需滿足((line-height )-(font-size ))/2<=height-font-size
**:

(2)、垂直居中-父元素高度確定的多行文字(方法一)

使用table(包括tbody,tr,td標籤),同時設定vertical-align:middle
注:

td標籤預設情況下就設定了vertical-align:middle屬性,所以不需要顯式的設定了。
css中有乙個垂直居中的屬性vertical-align,在父元素設定此樣式時,會對inline-block型別的子元素都有用。
**:

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

(3)、垂直居中-父元素高度確定的多行文字(方法二)

設定塊級元素的display為table-cell(設定為**單元顯示),啟用vertical-align屬性。
注:

在chrome、firefox、ie8以上的瀏覽器可以用這種方法,但ie6\7不支援。相容性差。
好處:

不用新增多餘的無意義的標籤
缺點:

相容性不是很好;
而且這樣修改display的block變成了table-cell,破壞了原有的塊狀元素的性質。
**:

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

看我是否可以居中。

大小不固定,多行文字的垂直居中

單行文字 可能很多人都知道如何讓單行文字垂直居中顯示,就是使用line height,將line height值與外部標籤盒子的高度值設定成一致就可以了。例如如下css height 3em line height 3em line height 40px height 40px 多行文字 如何實現...

多行文字垂直居中

單行文字垂直居中比較簡單,只需將 line height 屬性值與其父元素的 height 屬性值設為相等即可。如下所示 class text 這是第一段文字span class text 這是第二段文字span class text 這是第三段文字span class text 這是第四段文字sp...

多行文字 單行文字的垂直居中

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