如何垂直对齐表格单元格中的div？ [英] How do I vertically align a div inside a table cell?

问题描述

HTML：

<$ p $

如何垂直居中表格单元内的div？ p> < 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; 
} 
  

我知道类定义是多余的，但我一直在尝试很多不同的东西。为什么不是解决方案（不管它是什么）直观。我试过的显而易见的解决方案中没有一个会起作用。 .divClass 中的高度。像这样写：

  .cellClass {
 vertical-align：middle; 
 height：90px; 
 border：1px纯红色; 
 
  

检查http://jsfiddle.net/ncrKH/

How do I vertically center a div that is inside a table cell?

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

I know the class definitions are redundant, but I've been trying lots of different things. Why isn't the solution (whatever it is) intuitive. None of the "obvious" solutions that I tried would work.

解决方案

There is no need to defineheight in .divClass . write like this:

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

Check this http://jsfiddle.net/ncrKH/

这篇关于如何垂直对齐表格单元格中的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！