Tailwind 中按钮内部 svg 的垂直对齐 CSS

Question

我正在尝试使用 Tailwind CSS 将红色圆形按钮中的“x”居中。我已经尝试了很多 css 但没有任何效果。什么可以修复它？

https://play.tailwindcss.com/Wz54NCHCI8

<button type="button" class="flex justify-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="" width="40" h="40" class="icon svelte-1iu276v"></button>

Answer 1

添加 items-center will center your icon vertically and justify-center 将使您的图标水平居中。

代码：

<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">
    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
</button>

结果：

Playground

Tailwind 中按钮内部 svg 的垂直对齐 CSS

Vertical alignment of svg inside button in Tailwind CSS

tailwind-css