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