CSS实现带Discord图标的可跳转按钮内元素居中对齐方法

首先修正核心HTML语法错误 #

你当前写的代码存在标签嵌套错误：把<img>标签直接写在了<a>标签的属性位置，浏览器会将这段内容识别为无效属性，根本无法正常渲染出Discord图标。
正确的嵌套结构如下：

<li class="nav__btn">
  <a href="实际Discord跳转地址" class="button">
    <img class="disc" src="disc.png" alt="Discord标识" width="20">
    <span>Join our Discord</span>
  </a>
</li>

错位根源与无hack对齐实现 #

图标和文字垂直偏移是inline元素遵循基线对齐规则导致的浏览器默认行为，不需要手动调整边距硬凑位置，用弹性布局做对齐是稳定性最高的方案，对应CSS代码：

/* 按钮基础样式 */
.button {
  /* 启用行内弹性布局，适配导航栏的横向排列场景 */
  display: inline-flex;
  /* 让所有子元素在垂直方向严格居中，从根源消除偏移 */
  align-items: center;
  /* 图标和文字之间设置统一间距，避免手动写margin的维护成本 */
  gap: 8px;
  /* 重置锚点默认样式 */
  text-decoration: none;
  color: inherit;
  /* 按钮内边距根据设计稿调整即可 */
  padding: 8px 16px;
  border-radius: 6px;
}

常见踩坑提醒 #

• 不要用vertical-align: middle这类hack做对齐，不同字号、不同浏览器场景下很容易出现几像素的偏差，flex布局的居中是像素级对齐的，无兼容问题
• 文字单独套span标签包裹，后续调整文字字号、加 hover 动效、切换多语言时，不需要改动图标部分的样式
• 图标必须加alt属性，满足无障碍访问要求，让屏幕阅读器能正确识别按钮的功能

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