css - 垂直对齐表格 中的 div

Question

我有一个表格标题，<th> ，其中包含一个 <div>与文字。我想垂直 对齐 div，使其与标题的 底部 对齐。尽管看起来应该很容易，但我在做这件事时遇到了严重的麻烦。任何帮助都会很棒。

即

<table>
  <tr>
    <th>
      <div>T<br>E<br>X<br>T</div>
    </th>
    ...
  </tr>
  ...
</table>

如您所见，我将标题文本设为垂直(通过添加分隔符)。 header 被动态拉动并且长度(因此高度)变化。但我需要它们与底部而不是中心对齐。

Answer 1

<style>
th{
vertical-align:middle}
</style>

<table>
  <tr>
    <th>
      <span>T<br>E<br>X<br>T</span>
    </th>
    ...
  </tr>
  ...
</table>

这应该有效。

带有 display:inline 的 div 也可以解决这个问题。display:inline 是这里的技巧。