如何实现Tailwind CSS中按钮内部SVG图标的垂直居中对齐

• 首先修复flex布局配置：你当前给按钮设置的flex justify-center仅实现了水平方向的居中，需要额外添加items-center类实现垂直方向居中，两个属性搭配就能让flex容器内的子元素完全居中。
• 修正图标尺寸定义错误：原代码中img标签的高度属性写为h="40"不符合HTML原生属性规范，建议直接使用Tailwind的尺寸类控制图标大小，给img元素添加w-10 h-10类即可，也能避免原生属性写错导致的尺寸异常影响对齐效果。

修正后的完整代码如下：

<button type="button" class="flex justify-center items-center select-none bg-red-500 border-2 text-white text-xl font-bold p-2 m-2 rounded-full shadow h-20 w-20 focus:outline-none focus:shadow-outline">
  <img src="/icons/x.svg" alt="" class="icon svelte-1iu276v w-10 h-10">
</button>

如果调整后依然存在偏移，可以检查你使用的x.svg文件本身的viewBox配置，确认svg画布是否存在多余的上下留白，裁剪掉多余空白即可完全对齐。

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