
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: 这将水平和垂直居中块级元素内的子元素。
- 缩小高度值: 如果可能,可以将高度值缩小到与 leading 类对应的值。
- 自定义 leading 类: 如果你需要使用 line-height: 2.5rem; 这样的值,你可以定义一个自定义的 leading 类。
.leading-12 {
line-height: 2.5rem;
}然后在你的代码中使用它:
首页










