为何设置vertical-align: middle后SVG图标无法垂直居中？

问题原因 #

• line-height 属性对SVG这类可替换元素无效，你添加的line-height: 36px!important规则不会产生任何作用，属于无效配置。
• vertical-align: middle的对齐逻辑是让元素中点与父元素基线+父元素x-height的一半位置对齐，在你当前36px高的按钮容器中，这种对齐方式天然会导致SVG图标偏上。
• 你自定义的.my-svg-inline--fa类注释掉了适配图标类SVG的默认偏移修正规则/*vertical-align: -.125em;*/，进一步加剧了对齐偏移。

解决方法 #

最稳定通用的方案是给父级a标签开启flex布局，不需要调整SVG本身的对齐属性，代码如下：

.ssbp-list li a {
    height: 36px!important;
    width: 36px!important;
    /* 新增以下三行规则 */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

添加后原来给SVG设置的line-height、vertical-align规则都可以直接删除，就能实现完美的垂直+水平居中效果，无需反复调试偏移量。

如果不想修改父容器样式，也可以直接调整SVG的vertical-align数值，比如改为vertical-align: -0.125em或者根据实际显示效果调整为合适的px值，直到对齐为止，不过这种方案兼容性和适配性不如flex方案。

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