17370845950

图文左右对齐应使用 justify-content 而非 align-items；主轴方向由 flex-direction 决定，默认 row 时 justify-content 控制左右，align-items 控制上下；需确保图文同级位于 flex 容器内，并注意图片基线对齐和 box-sizing 问题。

图文在 Flex 容器中无法左右对齐，通常不是 align-items 的问题，而是混淆了主轴（horizontal）和交叉轴（vertical）的方向。用 align-items: center 只能实现**垂直居中**（即上下居中），对“左右对齐”没效果。

明确主轴方向：flex-direction 决定对齐逻辑

Flex 布局中：

• 主轴（main axis）：由 flex-direction 决定，默认是 row（从左到右）；此时左右对齐靠 justify-content
• 交叉轴（cross axis）：与主轴垂直；默认是上下方向，此时 align-items: center 才起作用——让项目在容器高度方向上居中

左右对齐该用 justify-content

想让图文在一行内左右对齐（比如图标靠左、文字靠右），需控制主轴分布：

• justify-content: flex-start → 左对齐（默认）
• justify-content: flex-end → 右对齐
• justify-content: space-between → 首尾贴边，中间均分空白（适合一左一右布局）
• justify-content: space-around → 每个项目周围等距留白

例如：

  ? 订单详情
  编辑

图文本身不对齐？检查是否包裹不当

常见错误：把图片和文字分别放在不同块级元素里，但没设为 flex 项目，或被内部 margin/padding 干扰：

• 确保图文同级、都在 flex 容器内（不要多套 div 隔开）
• 图片默认是 inline 元素，可能有底部空白（基线对齐导致）→ 加 vertical-align: top 或设 display: block
• 文字或图片设置了固定宽高/内外边距，挤压了对齐空间 → 用 box-sizing: border-box 统一计算方式

需要图文垂直+水平都居中？组合使用

如果目标是整个图文组在父容器中**水平居中 + 垂直居中**（比如卡片里的图标+标题）：

• 父容器设 display: flex
• 加 justify-content: center（水平居中）
• 加 align-items: center（垂直居中）

这时 align-items: center 才真正派上用场 —— 但它管的是“上下”，不是“左右”。

基本上就这些。别被“居中”二字带偏，先看方向，再选属性。