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

Codepen

我正在使用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 并调整提供图标文本的 margin/padding。请注意，我还更正了第 3 table 行标记，因为使用了两个 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>

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

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

html

css

tailwind-css