Tailwind CSS 中 line-height/leading 失效？如何实现垂直居中？

tailwind css line-height/leading 失效？垂直居中怎么做？

在使用 Tailwind CSS 时，你可能会遇到 line-height 或 leading 设置无效的情况，特别是对于垂直居中的元素。

这个问题通常是由以下原因引起的：

• 高度值不匹配： h-(值) 的实际值可能与 leading-(值) 类所生成的 line-height 值不匹配。例如，h-12 的实际值是 height: 3rem;，而 leading-6 的实际值是 line-height: 1.5rem;。
• leading 值超出范围： leading 类只有到 leading-10 的最大值，因此没有 leading-12。

解决方法：

以下是垂直居中元素的几种解决方法：

• 使用 items-center 和 justify-center： 这将水平和垂直居中块级元素内的子元素。

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

• 缩小高度值： 如果可能，可以将高度值缩小到与 leading 类对应的值。

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

• 自定义 leading 类： 如果你需要使用 line-height: 2.5rem; 这样的值，你可以定义一个自定义的 leading 类。

.leading-12 {
  line-height: 2.5rem;
}

然后在你的代码中使用它：

<div class="h-12 w-24 text-center leading-12 hover:bg-black hover:text-white">首页</div>

以上就是Tailwind CSS 中 line-height/leading 失效？如何实现垂直居中？的详细内容，更多请关注其它相关文章！