bootstrap 5 页脚中混合使用 `` 和 `` 图标时，因默认 `vertical-align` 值不同导致视觉错位；只需为图片显式设置 `vertical-align: -.125em` 即可与 bootstrap icons 完全对齐。
在 Bootstrap 5.3+ 的页脚布局中，当你同时使用自定义 SVG/PNG 图片（如 OpenSea 图标）和 Bootstrap Icons（如 <i class="bi bi-twitter">）时，即使都包裹在相同的 Flex 容器（如 d-flex、justify-content-end）中，图标仍可能出现垂直方向上的轻微偏移——前两个图片偏低，而 Bootstrap 图标居中。这不是 text-center 或 align-items-center 失效，而是 HTML 图片元素（<img>）的默认 vertical-align 值为 baseline，而 Bootstrap Icons 的 CSS 显式设置了 vertical-align: -.125em，以实现与文本行高的精确对齐。
✅ 正确解法：为所有 <img> 图标添加一致的 vertical-align 值，匹配 Bootstrap Icons 的基准线：
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao-pass">
<img src="..." class="opensea_icon"
style="height: 16px; width: 16px; vertical-align: -.125em;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao">
<img src="..."
style="height: 16px; width: 16px; vertical-align: -.125em;" />
</a>
</li>⚠️ 注意事项：
- 不要依赖 align-items-center 单独修复此问题：它作用于 Flex 子项的交叉轴对齐，但若子项本身基线不一致（如图片 vs 行内图标），仍会呈现错位；
- 避免使用 vertical-align: middle：该值基于父容器字体的 x-height 计算，易受字体上下文影响，不够稳定；
- 推荐将 vertical-align: -.125em 提取为 CSS 类复用，提升可维护性：
/* 在 index.css 中添加 */
.footer-icon-img {
vertical-align: -.125em;
}<img src="..." class="footer-icon-img" width="16" height="16" />
? 补充技巧：若需进一步微调（如适配不同尺寸图标），可结合 margin-top 或 transform: translateY()，但应优先以 vertical-align 为基础方案——它语义清晰、性能高效，且与 Bootstrap 的设计系统完全兼容。最终效果是所有图标（无论图片或字体图标）在视觉上严格水平居中、基线一致，符合专业 UI 对齐规范。
