I'm trying to center the "x" in the red circular button using Tailwind CSS. I've tried numerous css but nothing worked. What will fix it?
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>
Adding items-center will center your icon vertically and justify-center will center your icon horizontally.
Code:
<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>
Result:
