Fatal编程技术网
  • html/
  • Html 如何在Tailwind CSS中将文本与双尺寸图标字体图标垂直对齐？

Html 如何在Tailwind CSS中将文本与双尺寸图标字体图标垂直对齐？

html css

Html 如何在Tailwind CSS中将文本与双尺寸图标字体图标垂直对齐？,html,css,tailwind-css,Html,Css,Tailwind Css,我有以下模板 <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>

我有以下模板

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


供应
现在，模板呈现如下

如您所见，文本
设置
不对齐。如何解决这个问题



我正在使用，类似于字体awesome
你可以使用它作为你的图标。即使在
div
或
td




供应

我可以用你的代码做一个代码笔吗？因为内容在一个表格单元格内，你可能只需要添加
垂直对齐：中间到表格单元格样式。这是在Hi中，我用代码更新了问题pen@zgood，实际上我以前试过，但是图标会稍微偏离对齐。对齐中间我以前试过。但是文本/图标仍然有点关闭。或者是我看着它感到困惑？。请检查我的代码笔，我已使用5xl图标对其进行了更新，我觉得与表中的其他
td
列相比，文本和图标的像素减少了一点：|实际上，在2xl图标中更明显@Shobi可能会检查图标的线条高度和span@Shobi我现在只能想到一个定制的解决方案。检查edit.Wow。那很酷。非常感谢。如果我没记错的话，就像@zgood说的，有一些技巧与线高度有关。但我不知道该找什么。但是谢谢你的回答。它起作用了