Question

此刻我的图片并非垂直居中，我似乎无法修复它。

UIView

这是css：

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

这对图像没有影响。

Answer 1

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

默认情况下，B3中的列是浮动的，并且浮点数不是垂直对齐的，因为您可能已经知道了。因此，您只需将display-inline:block应用于列，然后将vertical-align：middle应用于列。这样，您将面对着名的4px gap。

你也可以使用flexboxes，而不是＆＃34; hacking＆＃34; B3，你应该选择B4;）

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

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

Answer 2

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

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

以下示例将显示如何将ONE列中的row列居中。

<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

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

2 个答案: