[英]How to vertically align a text along with a double sized icon font icon in Tailwind CSS?
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.如您所见,
Provisioning
is out of alignment 文本。 How to fix this?如何解决这个问题?
I am using line awesome fonts , similar to font-awesome我正在使用line awesome fonts ,类似于 font-awesome
You can make use of align-middle
for your icon.您可以使用
align-middle
作为您的图标。 It works even regardless of being inside a div
or td
即使在
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>
Edit:编辑:
Because you want a custom solution for the bigger icon and you want all the 3 texts to be aligned.因为您想要一个更大图标的自定义解决方案,并且您希望所有 3 个文本都对齐。 You can add a custom class and adjust the margin/padding of the text of the provision icon.
您可以添加自定义 class 并调整供应图标文本的边距/填充。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.