Flex容器内段落无法居中问题排查求助

你的卡片容器.card已经设置了display: flex、flex-direction: column和align-items: center，所以图片和段落元素本身已经在水平方向居中了。但段落文字看起来没居中，是因为p标签默认是块级元素，宽度会占满父容器（.card的宽度），且默认文字左对齐。

可以通过两种方式解决：

方法一：让段落文字居中 #

直接给p标签添加text-align: center属性，强制文字内容居中：

.card p {
  font-size: 12px;
  color: var(--grey);
  line-height: 16px;
  text-align: center; /* 新增这行 */
}

方法二：限制段落宽度为内容宽度 #

给p标签设置width: fit-content，让它的宽度只包裹文字内容，再配合.card的align-items: center，就能让文字整体居中：

.card p {
  font-size: 12px;
  color: var(--grey);
  line-height: 16px;
  width: fit-content; /* 新增这行 */
}

这两种方法都能解决你的问题，根据需求选择即可。

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