使用Chakra UI与CSS无法居中圆形内文字的问题求助

你的代码已使用flex布局的居中属性，但数字仍未垂直居中，大概率是**字体行高（line-height）**或元素默认内边距导致的偏移，可尝试以下几种方案：

方案1：调整字体行高 #

给testCss添加line-height属性，值设置为和容器宽高一致，或设为1，强制消除行高带来的垂直偏移：

export const testCss = style({
    width: "15px",
    height: "15px",
    backgroundColor: "blue",
    color: "white",
    borderRadius: "50%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    lineHeight: "15px", // 新增：与容器尺寸匹配
    padding: 0, // 可选：清除元素默认内边距
});

方案2：使用Chakra UI内置属性替代外部CSS #

避免外部样式与Chakra组件默认样式冲突，直接用Box的内置布局属性实现居中，代码更简洁：

<Td verticalAlign="middle">
 <Grid templateColumns="repeat(3, 1fr)">
  <GridItem colSpan={1} alignSelf="center">
   <Box 
     w="15px" 
     h="15px" 
     bg="blue" 
     color="white" 
     borderRadius="full"
     display="flex"
     alignItems="center"
     justifyContent="center"
     lineHeight="1"
     p={0}
   >
     6
   </Box>
  </GridItem>
  ...
 </Grid>
</Td>

方案3：微调字体基线偏移 #

部分字体的数字基线位置特殊，若上述方案无效，可尝试给文字添加微小的transform调整：

export const testCss = style({
    // 原有样式...
    transform: "translateY(-1px)", // 根据实际偏移量微调
});

问题效果参考：圆形内的数字偏上，未与圆形容器垂直居中

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