此刻我的图像没有垂直居中,而且似乎无法修复.
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.
更多推荐
React Bootstrap
发布评论