Wie richte ich ein Div in einer Tabellenzelle vertikal aus?

Question

Wie zentriere ich vertikal ein div, das in einer Tabellenzelle ist?

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; 
} 

Ich weiß, dass die Klassendefinitionen überflüssig sind, aber ich habe viele verschiedene Dinge versucht. Warum ist die Lösung (was auch immer es ist) nicht intuitiv? Keine der "offensichtlichen" Lösungen, die ich versuchte, würde funktionieren.

Answer 1

Es gibt keine Notwendigkeit, 01 zu definieren,in .divClass. schreiben wie folgt aus:

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

prüfen diese 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

Mit heraus sich jeder css Sie dies versuchen, diesen Code mit valign="middle" tun können.

<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

Die beste Tutorial ich je in Bezug auf diese Frage gefunden haben: How to vertically center stuff