React Bootstrap - 如何在一行中垂直居中图像答案

【问题标题】：React Bootstrap - how to center image vertically in a rowReact Bootstrap - 如何在一行中垂直居中图像
【发布时间】：2017-06-25 15:39:08
【问题描述】：

目前我的图像没有垂直居中，我似乎无法修复它。

<Grid>
  <Row className={styles.contain}>
   <Col md={6} md={4} >
    <div className={styles.testing>
      <img src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />
    </div>
    </Col>
    <Col md={6} md={4} >
     <img src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />
    </Col>
    <Col md={6} md={4} >
     <img src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />
    </Col>
  </Row>
<Grid>

这里是css：

.contain{
height:100%;

}
.testing{
     vertical-align: middle;
     display:inline-block;
}

这对图像没有影响。

【问题讨论】：

我认为您只需将vertical-align 应用于您的<Col>s，而不仅仅是嵌套的.testing div，因为vertical-align 与兄弟姐妹一起使用，而.testing 没有兄弟姐妹。这个工作？ codepen.io/mcoker/pen/KqXWdG 如果不能，你能给我们渲染的 html/css 吗？不确定你的反应代码正在编译成什么。

标签： css reactjs

【解决方案1】：

这取决于 Bootstrap 版本。我假设它是 Bootstrap 3 而不是 4（你会写 Reactstrap 而不是 Boostrap React）。

B3 中的列默认是浮动的，并且您可能已经知道浮动对垂直对齐不友好。因此，您可以将display-inline:block 应用于您的列，然后垂直对齐：中间。这样做，您将面对著名的4px gap。

您也可以使用弹性盒，但不要“破解” B3，而应该使用 B4 ;)

注意1：你不需要<div className={styles.testing}></div>

注2：<Col md={6} md={4}> 不好。你在这里重复 md 属性。

【讨论】：

【解决方案2】：

将Row 的className 设置为justify-content-x-center

screen_size 可以是xs,sm,md,lg,xl

以下示例将展示如何在 row 中居中 ONE 列。

<Row className="justify-content-md-center row">
    <Col className="col" screen_size={6}>
      <img src = '...'/>
    </Col>
</Row

.row {
  border: 1px solid black
}

.col {
  border: 1px solid yellow;
}

在示例中添加了额外的 CSS，以便您可以在浏览器中看到 row 和 col 以进行视觉理解。

如果您希望在该 SAME 列中居中更多图像，您需要做的就是在该列中添加图像。

例如

<Row className="justify-content-md-center row">
    <Col className="col" screen_size={6}>
      <img src = '...'/>
      <img src = '...'/>
      <img src = '...'/>
    </Col>
</Row

【讨论】：