Ant Design React : Vertical align div inside a col-CodePudding

I'm using Ant Design for a React project. It seems quite good and easy to use, except for one thing : vertical alignment. I'm trying to vertical align those 2 blocks of text on the right inside their grey parent div but cant make it work.

If I use foundation 6 it works perfectly but with ant cant figure it out what's wrong. So here is my code :

 <Row className="keynumbers" align="middle">
          <Col span={12}>
            <Graph tickets={nature} />
          </Col>
          <Col span={12} align='middle'>
          <Space
              direction="vertical"
              size="middle"
              style={{
                display: 'flex',
              }}
            >
            <TotalTickets total={total} />
              <TimeSolving
                tickets={resolution}
              />
              </Space>
          </Col>
        </Row>

The components TimeSolving and TotalTickets are basic div :

TotalTickets

<div  >
   <h3>{volumeTickets}</h3>
   <p>nombre de tickets</p>
</div>

TimeSolving

<div > 
  <h3>{prop.tickets}</h3>
  <p>temps moyen de résolution</p>
</div>

and the css for .block

 .block{
background: #f8f8f8;
height: 140px;
}

I just want to vertical align those two blocks of text.

Did I miss something ?

Thanks a lot

CodePudding user response：

If you are adding css for your block class, you can use flexbox to vertically centre its contents

.block {
  background: #f8f8f8;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

CodePudding user response：

Maybe you need to set <Col />'s span as {24}? Because Ant Design uses 24 grid.

<Row className="keynumbers" align="middle">
    <Col span={24}>
        <Graph tickets={nature} />
    </Col>
    <Col span={24} align='middle'>
        <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
            <TotalTickets total={total} />
            <TimeSolving tickets={resolution} />
        </Space>
    </Col>
</Row>