Question

在flex容器中，我有两位内容。双方都包含多行文字。我希望排列双方顶线的基线。我转向align-items: baseline来实现这一点，但不幸的是，它并没有真正产生预期的结果。有时，简单的浏览器似乎根本不对齐它们。您可以在下面看到不同的结果：

未对齐：

<div style="display:flex;align-items:baseline">
  <table>
    <tbody>
      <tr>
        <td>text</td>
      </tr>
      <tr>
        <td>text2</td>
      </tr>
    </tbody>
  </table>
  <div>text3</div>
</div>

顶

<div style="display:flex;align-items:baseline">
  <div>
    <div>text</div>
    <div>text2</div>
  </div>
  <div>text3</div>
</div>

理想情况下，我希望能够简单地指出包含我希望对齐的基线的文本的元素。但我可能会解决任何始终使每一方文本顶行基线对齐的解决方案。

目前，我没有使用align-items: baseline，我只是使用了大量的填充来使它们对齐，这不太理想。如何让浏览器与我对齐？

Answer 1

问题在于table cells have vertical-align: middle by default。

因此，您应该将其切换为baseline：

＆＃13;

#wrapper {
  display: flex;
  align-items: baseline;
}
td {
  vertical-align: baseline;
}
/* Some additional styles to display the baseline: */ td { font-size: 200%; } #wrapper:after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px solid red; }

＆＃13;

<div id="wrapper">
  <table>
    <tr><td>text</td></tr>
    <tr><td>text2</td></tr>
  </table>
  <div>text3</div>
</div>

＆＃13;

对齐多行文本的项目基线

1 个答案: