在表格的 2 列中垂直对齐文本答案

【问题标题】：Align text vertically in 2 columns of a table在表格的 2 列中垂直对齐文本
【发布时间】：2015-10-27 18:42:53
【问题描述】：

我有一个有 2 列的表格，每列都有不同大小的字体（较大的字体也很强大）。我的问题是文本的垂直对齐：它没有垂直对齐（见图）：

这是我的 html 代码：

<html>
<head>
  <style>
    .big-text-size {
      font-size: 3.5em;
    }
    .small-text-size {
      font-size: 1.1em;
    }
  </style>
</head>
<body>
      <table>
        <td class="big-text-size">
          <strong>My doctor's name</strong>
        </td>
        <td class="small-text-size"> Daniel Boro </td>
      </table>
</body>
</html>

有什么建议为什么会发生？

【问题讨论】：

请让您的示例更简洁：只保留重现问题所必需的内容。
表格只能用于表格数据 - 不能用于布局
@petermeissner：明白了，删除不必要的代码

标签： html css html-table

【解决方案1】：

调整不同大小文本 (see here) 的垂直对齐方式：

<html>
<head><style>
  .big-text-size {
      font-size: 3.5em;
      vertical-align: text-bottom;
    }
  .small-text-size {
    font-size: 1.1em;
    vertical-align: text-bottom;
  }
</style></head>
<body>
      <table>
        <td class="big-text-size">
          <strong>My doctor's name</strong>
        </td>
        <td class="small-text-size"> Daniel Boro </td>
      </table>
</body>
</html>

【讨论】：

【解决方案2】：

您的第二个表没有任何行...

<table>
    <tr> <!-- Missing -->
        <td class="small-text-size">Daniel Boro</td>
        <td class="big-text-size"><strong>My doctor's name</strong></td>
    </tr>
</table>

【讨论】：

我按你说的插入了标签，但它没有改变：看起来还是一样
你能做一个jsfiddle吗？

【解决方案3】：

尝试在表格中包含行。

您也可以访问此站点http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html 它提供了 4 个 CSS 技巧，可用于在表格单元格中垂直对齐文本

【讨论】：