Jak wyrównać w pionie element div wewnątrz komórki tabeli?

Question

W jaki sposób pionowo wyśrodkować element div znajdujący się w komórce tabeli?

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

Znam definicje klasy są zbędne, ale Próbowałem wiele różnych rzeczy. Dlaczego nie jest to rozwiązanie (cokolwiek to jest) intuicyjne. Żadne z "oczywistych" rozwiązań, które próbowałem, nie zadziałałoby.

Answer 1

Nie ma potrzeby, aby zdefiniować height w .divClass. napisać tak:

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

Sprawdź to 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

bez żadnych css samo można to zrobić z valign="middle" spróbuj tego kodu.

<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

Najlepszy poradnik jaki kiedykolwiek znaleziono dotyczące tej kwestii: How to vertically center stuff