React Bootstrap-如何在行中垂直居中放置图像 [英] React Bootstrap - how to center image vertically in a row

问题描述

此刻我的图像没有垂直居中，而且似乎无法修复.

My images at the moment are not centered vertically and I can't seem to fix it.

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

这对图像没有影响.

推荐答案

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

It depends of the Bootstrap version. I'll assume it's Bootstrap 3 and not 4 (you would have written Reactstrap instead of Boostrap React).

默认情况下，B3中的列是浮动的，并且您可能已经知道，float不支持垂直对齐.因此，您可以将 display-inline:block 应用于您的列，然后垂直对齐:居中.这样做，您将面对著名的 4像素间距.

Columns in B3 are floated by default and float is not vertical-align friendly as you may already know. So you could just apply display-inline:block to your columns and then vertical-align: middle. Doing so, you'll face the famous 4px gap.

您还可以使用flexboxes，但是不要"hacking" B3，而应该只使用B4;)

You could also use flexboxes, but instead of "hacking" B3, you should then just go with B4 ;)

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

注意2:< Col md = {6} md = {4}> 不好.您在这里重复了md属性，一无所获.

Note2: <Col md={6} md={4}> is not good. You repeat md attribute for nothing here.

这篇关于React Bootstrap-如何在行中垂直居中放置图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！