在表格单元格中使用DIV

Question

在this table中，不仅单元格B有标题和内容，还有单元格A和C.

我尝试使用DIV设置标题和内容只是部分成功。观察到font-weight，但vertical-align不是。为什么呢？

CSS

<style type="text/css">
    td {
        text-align: left;
    }
    .heading {
        vertical-align: top;
        font-weight: bold
    }
    .content {
        vertical-align: middle;
    }
</style>

HTML

<table width="300px" height="300px" border="1">
    <tr>
        <td rowspan="2">A</td>
        <td>
            <div class="heading">Heading of Cell B</div>
            <div class="content">Content of Cell B</div>
        </td>
    </tr>
    <tr>
        <td>C</td>
    </tr>
</table>

Answer 1

垂直对齐应该是中间

 verticle-align: middle;

这会将文本放在中间。虽然你必须知道它是放在线的中间（而不是容器），所以你需要一个行高

 line-height: xxx;

或使用div并模仿表格：http://jsfiddle.net/rf2kC/

Answer 2

垂直对齐不适用于内嵌显示的元素，如div。你可以把另一张桌子放在你的TD里面，或者把你的css改成这样的东西：

<style type="text/css">
    td {
        text-align: left;
    }
    .heading {
            position: relative;
    top: 0;
    background: blue;
    height: 150px;
    }
    .content {
      position: relative;
    bottom: 0;
    background: yellow;
    height: 150px;
    }

</style>

Answer 3

尝试：

   td {
        text-align: left;
        vertical-align:top;

    }

    .heading {
        font-weight: bold;
    }
    .content {
        margin: auto;
        line-height: 200px;
    }

http://jsfiddle.net/Xvx83/