CODEWITHSUNDEEP
cssreactjsvertical-alignmentreact-grid-layout
Eagle
Eagle

Reputation: 378

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.

Upvotes: 0

Views: 3979

Answers (4)

Sanchit Anand
Sanchit Anand

Reputation: 46

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>

Upvotes: 1

Nesrine Hadj Khelil
Nesrine Hadj Khelil

Reputation: 278

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>

Upvotes: 1

Jamie O&#39;Connell
Jamie O&#39;Connell

Reputation: 172

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>

Upvotes: 1

Sonu Nigam
Sonu Nigam

Reputation: 277

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>

Upvotes: 1

Related Questions