title: Vertical alignment of svg inside button in Tailwind CSS
body: <p>I'm trying to center the &quot;x&quot; in the red circular button using Tailwind CSS.  I've tried numerous css but nothing worked.  What will fix it?</p>
  <p><a href="https://play.tailwindcss.com/Wz54NCHCI8" rel="nofollow noreferrer">https://play.tailwindcss.com/Wz54NCHCI8</a></p>
  <p><a href="https://i.stack.imgur.com/KLb5x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KLb5x.png" alt="misaligned x in button" /></a></p>
  <pre><code>&lt;button type=&quot;button&quot; class=&quot;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&quot;&gt;&lt;img src=&quot;/icons/x.svg&quot; alt=&quot;&quot; width=&quot;40&quot; h=&quot;40&quot; class=&quot;icon svelte-1iu276v&quot;&gt;&lt;/button&gt;
  </code></pre>