Flex布局下图片与文字无法对齐问题（仿Instagram登录页）

你用align-items: center没实现视觉对齐，根本不是flex布局写法错了，是两个容易漏的浏览器默认样式问题：

• 插入的Facebook图标是行内替换元素，默认和文本基线对齐，底部会带3-4px的隐形空隙，直接把图标整体往下拽了几像素
• 包裹登录文字的<a>是行内元素，你写的width: 100%根本不生效，而且浏览器默认行高会让文字的实际计算中心和你预期的位置有偏差
• 额外加的justify-content: space-around会把图标和文字拉开不必要的空隙，不符合Ins登录按钮图标紧挨文字的样式，反而会放大对齐偏差

不用改HTML结构，直接替换原有CSS就行：

.fb a {
  text-decoration: none;
  font-size: 14px;
  color: #385185;
  font-weight: 600;
  line-height: 1; /* 固定行高消除默认行高带来的垂直偏移 */
}

.facebook {
  width: 16px; /* 官方图标尺寸为16px，20px会比文字视觉重量大，看起来偏沉 */
  height: 16px;
  display: block; /* 清除行内元素默认的底部基线空隙 */
}

.facebookwhole {
  display: flex;
  justify-content: center; /* 替换space-around，让按钮整体居中 */
  align-items: center;
  gap: 8px; /* 控制图标和文字的间距，和官方样式一致 */
}

/* 清除图标容器的默认行高影响 */
.fbpicture {
  line-height: 0;
}

你之前在其他项目用相同写法能正常对齐，基本是因为那些项目加了全局样式重置：比如统一给img设了display: block、清除了默认行高、给所有元素清了内外边距，这次没加对应reset就会出现这种差几像素的对齐问题。

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