如何在 Tailwind CSS 中将文本与双倍大小的图标字体图标垂直对齐？

Question

我有以下模板

<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>

现在模板呈现如下

如您所见， Provisioning is out of alignment 文本。 如何解决这个问题？

密码笔

我正在使用line awesome fonts ，类似于 font-awesome

Answer 1

您可以使用align-middle作为您的图标。 即使在div或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>

编辑：

因为您想要一个更大图标的自定义解决方案，并且您希望所有 3 个文本都对齐。 您可以添加自定义 class 并调整供应图标文本的边距/填充。 请注意，我还更正了第三个表格行标记，因为使用了两个类。

 .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>