React Bootstrap -如何将图像垂直居中

Question

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

<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;
}

这对图像没有影响。

Answer 1

这取决于Bootstrap版本。我假设它是Bootstrap 3而不是4(您应该编写Reactstrap而不是Boostrap React)。

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

您也可以使用flexboxes，但不应使用B4，而应使用flexboxes ;)

Note1:你不需要那个<div className={styles.testing}></div>

Note2：<Col md={6} md={4}>不好。在这里，您可以重复md属性而不做任何事情。

Answer 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