Question

我有一个有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>

任何建议为什么会发生？

Answer 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>

Answer 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>

Answer 3

尝试在表中包含行..

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

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

3 个答案: