如何让Flexbox组内箭头左对齐、文本水平居中且整体垂直居中？

使用Chakra UI构建包含箭头图标与文本的Flexbox容器，期望实现以下布局效果：

• 所有元素垂直居中对齐
• 水平方向上箭头图标靠左对齐，文本在父Flex容器中完全居中

尝试为Text元素设置alignSelf属性未达到预期效果，代码示例如下：

import { Flex, Text } from "@chakra-ui/react";
import { ArrowBackIcon } from "@chakra-ui/icons";

<Flex alignItems="center" background="grey">
  <ArrowBackIcon boxSize="32px" />
  <Text fontSize="24px" fontWeight={700} alignSelf="center">
    Confirm Your Information
  </Text>
</Flex>

当前效果为箭头与文本均靠左排列，文本未实现容器内水平居中。

方法一：绝对定位箭头图标 #

通过绝对定位让箭头脱离文档流，同时给父容器设置左内边距避免文本被遮挡，文本占据容器全宽后设置水平居中：

import { Flex, Text } from "@chakra-ui/react";
import { ArrowBackIcon } from "@chakra-ui/icons";

<Flex 
  alignItems="center" 
  background="grey" 
  position="relative"
  pl="40px" // 内边距尺寸匹配箭头大小，防止文本被遮挡
>
  <ArrowBackIcon 
    boxSize="32px" 
    position="absolute" 
    left="8px" // 调整箭头与容器左侧的间距
  />
  <Text fontSize="24px" fontWeight={700} width="100%" textAlign="center">
    Confirm Your Information
  </Text>
</Flex>

方法二：改用Grid布局 #

利用Grid的列跨越特性，让文本占据整个容器宽度并居中，箭头独立在左侧：

import { Grid, Text } from "@chakra-ui/react";
import { ArrowBackIcon } from "@chakra-ui/icons";

<Grid 
  templateColumns="auto 1fr" 
  alignItems="center" 
  background="grey"
>
  <ArrowBackIcon boxSize="32px" />
  <Text 
    fontSize="24px" 
    fontWeight={700} 
    gridColumn="1 / -1" // 文本跨越所有列
    textAlign="center"
  >
    Confirm Your Information
  </Text>
</Grid>

原方法无效原因 #

alignSelf属性仅控制Flex容器**交叉轴（垂直方向）的元素对齐，而需求是主轴（水平方向）**的文本居中，因此该属性无法实现预期效果。需要通过让文本占满容器宽度并设置textAlign="center"，或使用定位、Grid布局实现箭头与文本的分层排列来达成目标。

内容的提问来源于stack exchange，提问作者Jevon Cochran