How to vertically align a text along with a double sized icon font icon in Tailwind CSS?

Question

I have the following template

<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-black-500">
    <i class="las la-circle-notch text-3xl"></i>
    <span>Provisioning</span>
</td>

now the template gets rendered as follows

As you can see the text Provisioning is out of alignment. How to fix this?

Codepen

I am using line awesome fonts , similar to font-awesome

Answer 1

You can make use of align-middle for your icon. It works even regardless of being inside a div or td

 <link href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" rel="stylesheet"/> <div class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-black-500"> <i class="las la-circle-notch text-3xl align-middle"></i> <span>Provisioning</span> </div>

Edit:

Because you want a custom solution for the bigger icon and you want all the 3 texts to be aligned. You can add a custom class and adjust the margin/padding of the text of the provision icon. Note that I also corrected the 3rd table row markup because there were two classes used.

 .align-icon-middle { display: flex; align-items: center; }.align-icon-middle span { padding-left: 5px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" rel="stylesheet"/> <table class="rounded bg-white border border-gray-300"> <thead class="text-center"> <tr> <th>IP Address</th> <th>Provision Status</th> <th>Connection</th> </tr> </thead> <tbody class="bg-white text-center"> <tr> <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-center">162.243.160.162</td> <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm align-icon-middle leading-5 text-center align-icon-middle"> <i class="las la-circle-notch text-2xl animate-spin"></i> <span>Provisioning</span> </td> <td class="flex-col px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-center ""> <div> <i class="las la-square text-green-500"></i> Active </div> </td> </tr> </tbody> </table>