Search code examples
cssreactjsvertical-alignmentreact-grid-layout

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

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.

Solution

  • 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>