Ant Design React：如何在Col组件内垂直对齐Div元素

问题描述 #

我在React项目中使用Ant Design，整体体验良好，但遇到了垂直对齐问题：尝试将右侧两个文本块在其灰色父div（.block）内垂直对齐却无法实现。使用Foundation 6时该功能可正常生效，相关代码如下：

页面布局代码 #

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

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>

.block CSS样式 #

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

我仅需实现这两个文本块的垂直对齐，请问遗漏了什么配置？

解决方案 #

问题核心是.block容器仅设置了固定高度，但没有定义内部元素的垂直对齐规则，默认流式布局下子元素会从顶部开始排列。只需修改.block的CSS样式，添加弹性布局相关属性即可：

.block{
  background: #f8f8f8;
  height: 140px;
  /* 新增垂直居中配置 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 可选：若需要文字水平居中，加上这行 */
  align-items: center;
}

关键属性说明 #

• display: flex：将容器转为弹性布局，支持灵活的子元素对齐控制
• flex-direction: column：保持子元素（h3、p）的垂直排列顺序
• justify-content: center：让子元素在容器垂直方向上居中对齐
• align-items: center：可选，让子元素在水平方向上居中，适合需要文字居中的场景

另外提个小细节：React组件中应该用className="block"替代class="block"，这是React的语法规范，不过不影响对齐功能。

内容的提问来源于stack exchange，提问作者Arthur Fortin