Bootstrap 5.3.0-alpha1页脚图标对齐问题：前两张图片无法居中

问题根源在于自定义图片的默认对齐规则和Bootstrap图标不一致：Bootstrap Icons的bi类自带vertical-align: middle样式，而<img>标签默认是vertical-align: baseline，导致视觉上无法和Bootstrap图标居中对齐。

直接用Bootstrap自带的工具类就能快速解决，给自定义图片添加align-middle类即可：

修改后的图标代码示例：

<li class="ms-3">
    <a class="text-muted" href="https://opensea.io/collection/ozdao-pass">
        <img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" class="opensea_icon align-middle" style="height: 16px; width: 16px;" />
    </a>
</li>

<li class="ms-3">
    <a class="text-muted" href="https://opensea.io/collection/ozdao">
        <img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" class="align-middle" style="height: 16px; width: 16px;" />
    </a>
</li>

原理：align-middle类会给元素设置vertical-align: middle，和Bootstrap Icons的对齐规则统一，就能让自定义图片和bi图标保持垂直居中一致。

如果不想依赖Bootstrap工具类，也可以自定义CSS实现：

.opensea_icon, .footer-custom-icon {
    vertical-align: middle;
}

给对应的<img>标签加上自定义类名即可，效果和使用align-middle完全一致。

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