React Bootstrap：行列的垂直对齐？

Question

我正在使用 react bootstrap，我试图在一行中垂直对齐项目，但没有运气。我的问题是我在其中一列中有一个按钮，因此对于其他列，所有文本都向上移动一点，而按钮及其内容具有更大的高度。我的问题是如何使一行中的所有列具有相同的高度并在中间垂直对齐？到目前为止，我设法找到的唯一解决方案是使用 CSS： tranform: translateY(-50%) 这可以解决问题，但我正在寻找更好的动态解决方案，因为这需要应用于除按钮列之外的每一列

编辑：当我说列和行时，我说的是引导程序的 Col 和 Row，实际上不是表或行和列；很抱歉对于这个误会

Answer 1

您可以将 Bootstrap 的任何类应用于 React Bootstrap 组件。因此，根据Grid System docs，以下列都将垂直居中：

<Row className="align-items-center">
  <Col>
    <h1>{title}</h1>
    <p>{details}</p>
  </Col>
  <Col>
    <button>{callToAction}</button>
  </Col>
</Row>;

Answer 2

如果您使用的是表格行，您可以将内容包装在一个 <div>..</div>

喜欢：

<tr>
  <div classname="align-me"></div>
</tr>

然后你可以使用 flexbox 来动态对齐它们：

tr .align-me {
  display: flex;
  align-items: center;
}