企业首次建设网站的策划方案易观数据

问题描述

        如下图所示，在使用Ant-Design-Vue UI组件库提供的Button按钮+Icon组件开发页面时，发现icon图标并没有垂直居中。

icon插槽-图标垂直不居中

        再看一个官网的例子，

官网老子

问题排查

        首先，考虑是否由于当前的页面布局，导致对该icon图标的样式发生变化。

        于是，F12打开开发者工具，定位到ICON图标的位置，查看style样式栏目中，Icon图标的样式是否存在被覆盖的，并尝试强制让被覆盖掉的样式生效。

        ——果然发现了一个，display:block被覆盖掉了，于是手动调试，并为其添加了一个，然后icon就居中了。

        添加之后，按钮显示效果，

手动添加display:block进行调试

添加display:block之后的效果

初步解决方案|修改SVG图标的display样式

        由于项目中使用的是Scss，因为，样式代码如下，

<style scoped lang="scss">
:deep(.ant-btn){span {svg {display: block !important;}}
}
</style>

按钮效果

解决方案进阶

        经过以上分析，得知：Ant-Design-Vue的Button按钮SVG图标垂直未居中，是由于SVG图标样式被覆盖掉了，但是是被谁覆盖掉的呢？

style定位

        使用开发者工具，点击style之后，初步推断可能和Tailwind有关。

        于是，又去查找了互联网上相关的回答，在Ant Design的GitHub项目上有一个类似的问题：Some icons are not centered。

        在下面的回答中，提到了，Tailwind可能产生的影响，如下图所示，

        因此，我们就有了另外两种从根源上的解决方案，

方案1：定义全局SVG样式

svg { vertical-align: baseline; }

方案2：引入Taliwind时定义级联层

        关于@layer，参见MDN相关内容。

@tailwind base;@layer base {svg { display: inline;vertical-align: baseline; }
}