2

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>

and here is the css:

.contain{
height:100%;

}
.testing{
     vertical-align: middle;
     display:inline-block;
}

This had no effect on the image.

intangibles
  • 153
  • 2
  • 12
  • I think you just need to apply `vertical-align` to your ``s, not just the nested `.testing` div since `vertical-align` works with siblings and `.testing` has no siblings. this work? https://codepen.io/mcoker/pen/KqXWdG If not can you just give us rendered html/css please? Not sure what your react code is compiling to. – Michael Coker Jun 25 '17 at 15:51

2 Answers2

1

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

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.

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

Note1: You don't need that <div className={styles.testing}></div>

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

FortyTwo
  • 2,414
  • 3
  • 22
  • 33
JFC
  • 575
  • 11
  • 25
0

Set the className of a Row to justify-content-x-center

The screen_size can be xs,sm,md,lg,xl

The following example will show how to center ONE column in a 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;
}

Added extra CSS in the example so you can see the row and col in your browser for visual understanding.

If you wish to center more images within that SAME column, all you would need to do is add the images within that column.

Ex.

<Row className="justify-content-md-center row">
    <Col className="col" screen_size={6}>
      <img src = '...'/>
      <img src = '...'/>
      <img src = '...'/>
    </Col>
</Row
halapgos1
  • 1,130
  • 4
  • 16
  • 34