Question

我无法弄清楚为什么这个文字不会与图像的底部对齐：

以下是示例摘录：

img {
  height: 80px;
  width: auto
}

.spacer {
  width: 30px;
}

h1 {
  vertical-align: bottom;
}

<table>
  <tr>
    <td><img src="https://unsplash.it/80" /></td>
    <td class="spacer"></td>
    <td>
      <h1><b>KCFishFans.com</b></h1>
    </td>
  </tr>
</table>

Answer 1

默认情况下，

h1有margins。您可以在CSS中删除它们。

＆＃13;

table h1 {
  margin: 0;
}

＆＃13;

<table>
  <tr>
    <td><img src="https://unsplash.it/80" style="height:80px; width:auto" /></td>
    <td style="width:30px"></td>
    <td style="vertical-align:bottom">
      <h1><b>KCFishFans.com</b></h1>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

以下是我对布局和元素之间空间的替代解决方案：

我会用flexbox和包装器来解决它。对于img和h1之间的空格，如果空padding-left与td，我会使用width。该解决方案的优点是，它与img的底部100％对齐。对于表格，它没有与图像底部100％对齐（我认为因为h1的默认行高）。

您有一个完整的flexbox指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望这有帮助。

.wrapper {
  display: flex;
  align-items: baseline;
}

.wrapper__image {
  height: 80px;
  width: auto
}

.wrapper__title {
  padding-left: 30px;
}

<div class="wrapper">
  <img class="wrapper__image" src="https://unsplash.it/80">
  <h1 class="wrapper__title">KCFishFans.com</h1>
</div>

将TD中的文本与另一个TD中的图像底部对齐

2 个答案: