TailwindCSS中line-height失效的原因是什么？-css教程-PHP中文网

TailwindCSS中line-height失效的原因是什么？

碧海醫心

发布： 2024-11-12 08:33:01

原创

1148人浏览过

tailwindcss中line-height失效的原因是什么？

垂直居中失效？tailwindcss中的line-height

在tailwindcss中，可以使用line-height-*或leading-*类来设置行高。然而，有时这些类可能无法正常工作。

原因

<nav class="w-full nav h-12">
    <div class="container mx-auto flex">
        <div class="w-24 leading-6 text-center h-12 hover:bg-black">首页</div>
        <p class="w-24 leading-6 text-center h-12 hover:bg-black">首页</p>
        <span class="w-24 leading-6 text-center h-12 hover:bg-black">首页</span>
    </div>
</nav>

登录后复制

在这种情况下，leading-6未能有效，原因在于元素的实际高度(3rem)大于line-height: 1.5rem。

立即学习“前端免费学习笔记（深入）”；

因赛AIGC

因赛AIGC解决营销全链路应用场景

查看详情

解决办法

有两种方法可以解决这个问题：

调整元素高度：将h-12改为h-10，使元素高度与line-height值（2.5rem）匹配。

<nav class="nav h-10 w-full">
  <div class="container mx-auto flex">
    <div class="h-10 w-24 text-center leading-10 hover:bg-black hover:text-white">首页</div>
    <p class="h-10 w-24 text-center leading-10 hover:bg-black hover:text-white">首页</p>
    <span class="h-10 w-24 text-center leading-10 hover:bg-black hover:text-white">首页</span>
  </div>
</nav>

登录后复制

使用flexbox：使用flex类来垂直居中元素。

<nav class="nav h-12 w-full">
  <div class="container mx-auto flex">
    <div class="flex h-12 w-24 items-center justify-center hover:bg-black hover:text-white">首页</div>
    <p class="flex h-12 w-24 items-center justify-center hover:bg-black hover:text-white">首页</p>
    <span class="flex h-12 w-24 items-center justify-center hover:bg-black hover:text-white">首页</span>
  </div>
</nav>

登录后复制

其他提示