React Bootstrap

本文介绍了React Bootstrap-如何在行中垂直居中放置图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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="docs.google/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" /> </div> </Col> <Col md={6} md={4} > <img src="docs.google/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" /> </Col> <Col md={6} md={4} > <img src="docs.google/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.