如何垂直对齐表格单元格内的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; 
}

我知道的类定义是多余的，但我一直在尝试很多不同的东西。为什么不是解决方案（不管它是什么）直观。我尝试过的“明显”解决方案都不会起作用。

来源

2012-06-12 John Anderson

没有必要定义height in .divClass。像这样写：

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

入住这http://jsfiddle.net/ncrKH/

来源

2012-06-12 04:30:46 sandeep

谢谢！我把'float：left'搞砸了。 –

是的，浮动＆显示：块效果表功能。 – sandeep

.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

来源

2012-06-12 04:19:35

把你的小提琴的内容到你的答案在这里，并解释代码的作用。另见http://meta.stackexchange.com/questions/8231 –

出你可以用valign="middle"做任何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>

来源

2012-06-12 05:12:41

我曾经找到有关这个问题的最好的教程： How to vertically center stuff

来源

2012-06-12 06:38:23 GEMI

如何垂直对齐表格单元格内的div？

回答

相关问题