页脚中自定义 `` 图标与 bootstrap 图标（如 `bi-twitter`）无法垂直居中对齐，根本原因是二者默认 `vertical-align` 值不同；为统一基线，需显式为图片设置 `vertical-align: -.125em`。
在 Bootstrap 5.3+ 中，内置图标（如 <i class="bi bi-twitter"></i>）默认应用了 vertical-align: -.125em，这使其能与行内文本和其他图标保持视觉基线一致。而原生 <img> 元素默认使用 vertical-align: baseline，会与文字底部对齐，导致在相同行高容器中明显“上浮”或“下沉”，即使已使用 d-flex、align-items-center 等 Flex 工具类也无法自动修正——因为 vertical-align 是行内级元素的独立对齐机制，不受 Flex 容器的 align-items 控制。
✅ 正确解决方案：为所有页脚中的 <img> 图标显式添加 vertical-align: -.125em，与 Bootstrap 图标保持一致：
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao-pass">
<img src="/uploads/20260115/17684127536967d651e7c43.jpg"
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="/uploads/20260115/17684127536967d651e7c43.jpg"
style="height: 16px; width: 16px; vertical-align: -.125em;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://twitter.com/xxx">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://t.me/xxx">
<i class="bi bi-telegram"></i>
</a>
</li>
</ul>⚠️ 注意事项：
- 不要依赖 align-items-center 或 text-center 修复此问题——它们作用于 Flex 容器层级，而 vertical-align 是行内元素自身的渲染属性；
- 若使用 CSS 类统一管理，建议在 index.css 中添加：
.footer-icon-img { vertical-align: -.125em; }并在 HTML 中改为 <img class="footer-icon-img" ...>；
- 图标尺寸建议保持一致（如均设为 16px），避免因宽高差异引发额外偏移；
- 如后续升级 Bootstrap 版本，可检查 .bi 类的 vertical-align 值（通过浏览器开发者工具查看），确保自定义样式同步更新。
通过这一微小但关键的样式调整，即可实现所有图标在页脚中真正视觉居中、基线对齐，提升整体 UI 专业性与一致性。
