How to vertically align in a react-grid-system row?

Question

I am using react-grid-system with an image and two columns for text as follows:

<Row>
  <Col md={1}>
    <img src=".." />
  </Col>
  <Col md={4}>
    .....
  </Col>
  <Col md={7}>
    ....
  </Col>
</Row>

In this, I want the image and all the text to be vertically in the middle of the row. I read the documentation here but wasn't able to find anything related to vertical alignment.

Answer 1

There is vertical alignment in the docs it states for vertical alignment to use the align prop

  <Row align="center" style={{ height: '75px' }} debug>
    <Col debug>1 of 3</Col>
    <Col debug>2 of 3</Col>
    <Col debug>3 of 3</Col>
  </Row>

Answer 2

I think you should add justify attribute to Row Element with "center" value like this:-

    <Row justify="center">
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>

Answer 3

try

<div class="i-am-centered">
<Row>
  <Col md={1}>
    <img src=".." />
  </Col>
  <Col md={4}>
    .....
  </Col>
  <Col md={7}>
    ....
  </Col>
</Row>
</div>

and for styling :

<style>
.i-am-centered { margin: auto; max-width: 300px;}
  </style>

Answer 4

It helps in responsive design

<div style={{display:'grid',placeContent:"center"}}>
    <Row>
      <Col md={1}>
        <img src=".." />
      </Col>
     <Col md={4}>
       .....
     </Col>
     <Col md={7}>
       ....
     </Col>
    </Row>
</div>