css 在未知高度的容器內讓內容垂直居中

這就是未知高度的垂直居中問題。在ie6下我沒辦法讓 t(圖中灰色塊)有100%的高度。於是基於vertical-align:middle的垂直居中方法就不管用了。

這個寫法用到了ieonly的:writing-mode:tb-rl;這個屬性，以及ie6下top:50%能正確定位到當前父容器高度的一半位置(padding-top:50%、margin-top:50%貌似不能得到這裡想要的效果)

可以看到 t 被設定了高度，這個高度應該是介於 t 中文字豎排時候的高度和 a 最小高度之間的。

這中寫法適合於不單獨定義高度的情況，單獨定義高度的話，寫法就很多很多了……

<

style

type

="text/css">

margin:0;padding:0;}

body

.container

.list

.list h4

.list_title_add

.list_title_add span

.list dl

.list dt

.list dt span

.list dd

.list dd ul

.list li

.list li a,.list li a:visited

.list li a:hover

.list dd p

-->

style

>

<

body

>

<

divclass

="container">

<

divclass

="list">

<

h4>

<

span

class

="list_title_add">

<

span

>標題

span

>

span

>

h4>

<

dl>

<

dt>

<

ahref

="#"

title

=""target

="_blank">飲食男女

a>

<

span

>(今日新貼:578941)

span

>

dt>

<

ddclass

="clearall">

<

ul>

<

li>

<

ahref

="#"

title

=""target

="_blank">旅遊先遣隊

a>

li> ul

> dd

> dl

>

<

dl>

<

dt>

<

ahref

="#"

title

=""target

="_blank">飲食男女

a>

<

span

>(今日新貼:578941)

span

>

dt>

<

ddclass

="clearall">

<

ul>

<

li>

<

ahref

="#"

title

=""target

="_blank">旅遊先遣隊

a>

li>

<

li>

<

ahref

="#"

title

=""target

="_blank">結伴同行

a>

li>

<

li>

<

ahref

="#"

title

=""target

="_blank">遊玩杭州

a>

li> ul

> dd

> dl

>

<

dl>

email:[email protected]

,seven的部落格

<

dt>

<

ahref

="#"

title

=""target

="_blank">飲食男女

a>

<

span

>(今日新貼:578941)

span

>

dt>

<

ddclass

="clearall">

<

ul>

<

li>

<

ahref

="#"

title

=""target

="_blank">旅遊先遣隊

a>

li>

<

li>

<

ahref

="#"

title

=""target

="_blank">結伴同行

a>

li> ul

> dd

> dl

>

<

dl>

<

dt>

<

ahref

="#"

title

=""target

="_blank">飲食男女

a>

<

span

>(今日新貼:578941)

span

>

dt>

dl>

<

dl>

<

dt>

<

ahref

="#"

title

=""target

="_blank">飲食男女

a>

<

span

>(今日新貼:578941)

span

>

dt>

<

ddclass

="clearall">

<

ul>

<

li>

<

ahref

="#"

title

=""target

="_blank">旅遊先遣隊

a>

li>

ul>

dd>

dl>

<

dl>

<

dt>

<

ahref

="#"

title

=""target

="_blank">飲食男女

a>

<

span

>(今日新貼:578941)

span

>

dt>

<

ddclass

="clearall">

<

ul>

email:[email protected]

,seven的部落格

<

li>

<

ahref

="#"

title

=""target

="_blank">旅遊先遣隊

a>

li> ul

> dd

> dl

>

div>

div>

body

>

html

>

css 在未知高度的容器內讓內容垂直居中

這就是未知高度的垂直居中問題。在ie6下我沒辦法讓 t 圖中灰色塊 有100 的高度。於是基於vertical align middle的垂直居中方法就不管用了。這個寫法用到了ieonly的 writing mode tb rl 這個屬性，以及ie6下top 50 能正確定位到當前父容器高度的一半位...

css 在未知高度的容器內讓內容垂直居中

這就是未知高度的垂直居中問題。在ie6下我沒辦法讓 t 圖中灰色塊 有100 的高度。於是基於vertical align middle的垂直居中方法就不管用了。這個寫法用到了ieonly的 writing mode tb rl 這個屬性，以及ie6下top 50 能正確定位到當前父容器高度的一半位...

CSS未知高度垂直居中的實現

css垂直居中 好了，我們看其css實現。凡是table能做到的，css都能做的，但各瀏覽器在css的差異比較大，因此要相容它們難度很大。這涉及許多細節，各種流啊，display的表現效果與css hack，ie早些年搞了大堆的私有屬性，這也有待我們深一步挖掘。我們先看最簡單的實現，背景法 背景法 ...