如何在 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没有对齐。如何解决这个问题？

代码笔

我正在使用line Awesome 字体，类似于 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 个文本对齐。您可以添加自定义类并调整配置图标文本的边距/填充。请注意，我还更正了第三个表行标记，因为使用了两个类。

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