單行 多行文字的垂直居中

>無標題文件

title

>

head

>

<

style

>

.container

style

>

<

body

>

<

div

class

="container"

>

<

h3>1.單行文字居中

h3>

<

div

style

="border:1px dashed red; line-height:60px; margin:30px;"

>

這是高度為30畫素的單行文字

div>

<

h3>2.多行文字不定高度居中

h3>

<

div

style

="border:1px dashed red; padding:60px 0; margin:30px;"

>

<

div>多行文字不定高度居中

div>

<

div>多行文字不定高度居中

div>

<

div>多行文字不定高度居中

div>

div>

<

h3>3.多行文字定高度居中

h3>

<

div

style

="border:1px dashed red; margin:30px; height:80px;"

>

<

span

style

="vertical-align:middle;display:inline-block; "

>中中中<

br>中中中中中中中中中中中中中

span

>

<

span

style

="line-height:80px; ; display:inline-block;"

>

你看不到我哦(請設定font-size:0)

span

>

div>

div>

body

>

html

>

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

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

單行 多行文字的垂直居中

無標題文件 title head style container style body div class container h3 1.單行文字居中 h3 div style border 1px dashed red line height 60px margin 30px 這是高度為30畫素的...

多行文字垂直居中

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