bootstrap 页脚中混合使用 `` 和 `` 图标时，因默认 `vertical-align` 值不同导致垂直错位；只需为所有图片显式设置 `vertical-align: -.125em` 即可与 bootstrap icons 完全对齐。
在 Bootstrap 5.3（包括 alpha 版本）中，<i class="bi bi-*"> 图标默认应用了 vertical-align: -.125em（约 -2px），使其在行内上下文中精准居中对齐。而 <img> 元素默认的 vertical-align 是 baseline，会与文本基线对齐，导致视觉上明显偏低——即使父容器已启用 d-flex align-items-center，该属性仍无法覆盖图片自身的基线行为。
✅ 正确解决方案：为所有自定义图标图片添加 vertical-align: -.125em 样式（推荐通过 CSS 类复用，而非内联样式）：
<!-- 推荐：统一添加自定义类 -->
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao-pass">
<img src="..." class="footer-icon" alt="OpenSea">
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao">
<img src="..." class="footer-icon" alt="OpenSea Collection">
</a>
</li>并在 CSS 中定义：
/* static/css/index.css */
.footer-icon {
height: 16px;
width: 16px;
vertical-align: -.125em; /* 关键：匹配 Bootstrap Icons 的对齐基准 */
}⚠️ 注意事项：
- 避免仅依赖 align-items-center 或 text-center：它们作用于 Flex 容器或文本块层级，无法修正行内元素（如 <img>）自身的 vertical-align 行为；
- 不要使用 margin-top 或 transform: translateY() 等 hack 方式微调——易受字体大小、缩放比例影响，且破坏语义；
- 若需响应式适配，可结合 font-size 或 em 单位动态调整 vertical-align（如 -.125em 已具备良好缩放性）；
- 所有图标（含 <i> 和 <img>）建议统一设置 height/width 为偶数像素（如 16px），并确保 line-height 与容器高度协调，进一步提升一致性。
最终效果：所有图标（无论 SVG 图片还是 Bootstrap Icons）将严格垂直居中，无视觉偏移，符合现代 UI 对齐规范。
