css - 在表格单元格内使用 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/