मैं तालिका कक्ष के अंदर एक div को लंबवत रूप से संरेखित कैसे करूं?

Question

मैं तालिका कक्ष के अंदर एक div को लंबवत कैसे केंद्रित करूं?

HTML:

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

सीएसएस:

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

चेक इस http://jsfiddle.net/ncrKH/

Answer 2

.divClass { margin-top:auto; }

एचटीएमएल

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

सीएसएस

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

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

.divClass { 
margin-top:auto; 
}​ 

Live Example

Answer 3

बाहर के साथ

किसी भी सीएसएस ही आप valign="middle" साथ ऐसा कर सकते इस कोड का प्रयास करें।

<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