CODEWITHSUNDEEP
cssreactjsantd
cansu
cansu

Reputation: 1142

How to align col content horizontally in Ant Design React components?

I need to align col content to center horizontally. I looked ant documentation but could not came up with a solution.

What I tried is :

enter image description here

Upvotes: 2

Views: 5066

Answers (2)

Muhammad Azam
Muhammad Azam

Reputation: 264

I get ride of this problem by adding CSS property "justifyContent : center" to col component.

<Row>
    <Col  style={{display: 'flex', justifyContent: 'end'}}></Col>
    <Col  style={{display: 'flex', justifyContent: 'center'}}></Col>
</Row>

Upvotes: 0

cansu
cansu

Reputation: 1142

I solved problem by adding "type" and "align" properties to Col component.

  <Row>
    <Col span={8} style={{backgroundColor:'red'}} type="flex" align="middle" >
      Col
    </Col>
    <Col span={4} style={{backgroundColor:'blue'}}>
      Col
    </Col>
  </Row>

Upvotes: 3

Related Questions