css - 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 的，您可能已经知道， float 对垂直对齐不友好。所以你可以申请 display-inline:block到您的列，然后垂直对齐:中间。这样做，您将面对著名的 4px gap .

你也可以使用 flexboxes，但不是“破解”B3，你应该直接使用 B4 ;)

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

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