divをテーブルセル内で垂直に配置するにはどうすればよいですか？

Question

テーブルセル内にあるdivをどのように垂直に配置するのですか？

HTML：

<tr class="rowClass"> 
    <td class="cellClass"> 
     <div class="divClass">Stuff</div> 
    </td> 
</tr> 

CSS：

.rowClass { 
    vertical-align:middle !important; 
    height:90px; 
} 

.cellClass { 
    vertical-align:middle !important; 
    height:90px; 
} 

.divClass { 
    vertical-align:middle !important; 
    height:90px; 
} 

私はクラス定義が重複しているけど、私は別のものの多くをしようとしてきました。なぜソリューションが（それが何であれ）直感的ではありません。私が試した "明白な"解決策のどれもうまくいきませんでした。

Answer 1

01を定義する必要はありませんの.divClass。このように書きます：

.cellClass { 
    vertical-align:middle; 
    height:90px; 
    border:1px solid red; 
} 

チェックあなたはvalign="middle"でこれを行うことができ、このうちでhttp://jsfiddle.net/ncrKH/

Answer 2

.divClass { margin-top:auto; }

HTML

<table border=1> 
<tr class="rowClass"> 
<td class="cellClass"> 
    <div class="divClass">Stuff</div> 
</td> 
</tr> 
</table> 

CSS

.rowClass { 
vertical-align:middle !important; 
height:90px; 
} 

.cellClass { 
vertical-align:middle !important; 
height:90px; 
} 

.divClass { 
margin-top:auto; 
}​ 

Live Example

Answer 3

任意のCSS自体は、このコードを試してみてください。

<table width="100%" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <th height="550" align="center" valign="middle" scope="col"> 

    <div>Hello</div> 
    </th> 
    </tr> 
</table> 

Answer 4

私が今までにこの質問に関して発見した最高のチュートリアル： How to vertically center stuff