使用Flexbox实现图文居中遇问题：图片底部存在间隙求助

嘿，我来帮你搞定这个Flexbox对齐的小麻烦！你遇到的图片底部间隙问题，其实是行内替换元素的默认基线对齐导致的，再加上你的.nightmare类样式没生效，才让调整只对文字起作用。下面一步步给你解决：

问题根源拆解 #

1. 图片的行内特性：<img>是行内替换元素，默认会和文字的基线对齐，这就会在底部留出一小段间隙，哪怕你用了Flexbox，这个默认行为也会干扰对齐效果。
2. .nightmare样式无效：你给.nightmare加了align-items:center，但没设置display:flex——这个属性只有在Flex容器上才生效，所以等于白加了。
3. 无效的font-size：你写的font-size: 1没有单位，浏览器会直接忽略这个属性，文字大小可能继承了默认样式，也会间接影响对齐观感。

修复方案（附带优化排版） #

我会同时帮你调整HTML结构让排版更规整，以及修改CSS彻底解决间隙问题：

第一步：调整HTML结构（分组更清晰）

把每组「图标+文字」包在一个容器里，方便Flex统一控制对齐：

<div class="phone">
  <div class="contact-group">
    <div class="icon-wrapper">
      <a href="mailto:cplusc@gmail.com"><img src="../C&C/img/email.png" width="18" height="18"></a>
    </div>
    <div class="text-wrapper">
      <a href="mailto:cplusc@gmail.com">contador@gmail.com</a>
    </div>
  </div>
  <div class="contact-group">
    <div class="icon-wrapper">
      <a href="tel:+1-303-499-7111"><img src="../C&C/img/Call-Icon.png" width="18" height="18"></a>
    </div>
    <div class="text-wrapper">
      <a href="tel:+1-303-499-7111">(303) 499-7111</a>
    </div>
  </div>
</div>

第二步：修改CSS代码（彻底解决对齐+间隙）

/* 外层容器：控制整体排版 */
.phone {
  display: flex;
  flex-wrap: wrap;
  color: #ffffff;
  background-color: #004c00;
  justify-content: flex-end;
  align-items: center;
  font-size: 1rem; /* 补上单位，确保文字大小生效 */
  gap: 2rem; /* 给两组联系方式加间距，排版更宽松 */
  padding: 0.5rem 1rem; /* 可选：给横幅加内边距，避免内容贴边 */
}

/* 每组联系方式的容器：控制图标和文字的对齐 */
.contact-group {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 图标和文字之间的间距 */
}

/* 图标容器：确保图标在内部居中 */
.icon-wrapper {
  display: flex;
  align-items: center;
}

/* 关键：消除图片底部间隙 */
.phone img {
  display: block; /* 把图片改成块级元素，彻底摆脱行内基线对齐的影响 */
  /* 或者用 vertical-align: middle; 也能解决，但block更彻底 */
}

/* 优化链接样式：继承容器颜色，去掉下划线 */
.phone a {
  color: inherit;
  text-decoration: none;
}

如果不想改HTML结构的简化版 #

要是你不想调整HTML，至少要做这两个修改：

/* 让.nightmare变成Flex容器，align-items才会生效 */
.nightmare {
  display: flex;
  align-items: center;
}

/* 消除图片底部间隙 */
.phone img {
  display: block;
}

/* 补上font-size的单位 */
.phone {
  font-size: 1rem;
}

这样修改后，图标和文字就能完美垂直居中，底部的间隙也会消失，排版会和你期望的蓝色横幅一样整洁。

内容的提问来源于stack exchange，提问作者Pablo Aguirre de Souza