Ant Design React : Vertical align div inside a col

Question

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 class="block" >
   <h3>{volumeTickets}</h3>
   <p>nombre de tickets</p>
</div>

TimeSolving

<div class="block"> 
  <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

Answer 1

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;
}

Edit:

You could achieve similar with Ant's Space primitive, which is really just a Flexbox primitive.

const TimeSolving = () => (
  <Space
    direction="vertical"
    size={0}
    style={{
      height: 140,
      justifyContent: "center"
    }}
  >
    <h3>10</h3>
    <p>temps moyen de résolution</p>
  </Space>
);