React Bootstrap：如何垂直对齐行中的列？

Question

我正在使用React Bootstrap，试图在一行内垂直对齐项目，但没有成功。我的问题是，在其中一列中有一个按钮，因此对于其他列，所有文本都会上移一点，而按钮及其内容的高度较大。 我的问题是如何使一行内的所有列具有相同的高度，并且全部在垂直居中对齐？ 到目前为止，我找到的唯一解决方案是使用CSS： tranform: translateY(-50%) 这个方法可以解决问题，但我想找一个更好、更动态的解决方案，以便应用于除按钮列之外的每一列

编辑：当我说“列”和“行”时，我指的是Bootstrap的Col和Row，实际上不是表格或行列；对于造成的误解，我表示抱歉。

- user3570947

Answer 1

你可以将Bootstrap的任何类应用于React Bootstrap组件。因此，根据网格系统文档，下列列将垂直居中：

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

- kburgie

---

至少这个答案对我有用。我建议react-bootstrap团队尽快更新文档。有时我不太确定Bootstrap的所有功能是否在reactjs bootstrap中也有效。 - Aaron Liu

Answer 2

如果您正在使用表格行，可以在<div>..</div>中包装内容。

例如：

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

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

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

- Sarahshuffle

---

抱歉造成误解，我实际上是在指bootstrap的“col”和“row”类，而不是实际的HTML表格。 - user3570947

你能否发布相关的代码片段或jsfiddle链接？ - Sarahshuffle

Answer 3

我也遇到了同样的问题，我找到了这个：

<td className="align-middle"></td>

参考： https://www.codegrepper.com/code-examples/html/bootstrap+table+text+vertical+align+center 这段代码演示如何使用Bootstrap表格将文本垂直居中对齐。您可以通过添加“align-middle”类来实现这一点，该类将应用于每个单元格并将其内容垂直居中。

- Makara Atipatipat

Answer 4

我尝试了@kburgie答案中的代码片段，但对我没有用，我的Row一动不动。所以，我在那个Row周围画了一个边框，以弄清楚发生了什么。

看起来Row只有足够的height来适应其子元素，没有多余的空间，这就是为什么它不能垂直移动。给行一些height，然后它就可以轻松地工作了。

.viewport-height {
     height: 100vh;
}

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

本来可以在@kburgie的评论中添加这个，但是我声望不够。

- faheemkodi