
垂直居中失效?tailwindcss中的line-height
在tailwindcss中,可以使用line-height-*或leading-*类来设置行高。然而,有时这些类可能无法正常工作。
原因
在这种情况下,leading-6未能有效,原因在于元素的实际高度(3rem)大于line-height: 1.5rem。
立即学习“前端免费学习笔记(深入)”;
解决办法
有两种方法可以解决这个问题:
- 调整元素高度:将h-12改为h-10,使元素高度与line-height值(2.5rem)匹配。
- 使用flexbox:使用flex类来垂直居中元素。
其他提示
- tailwindcss的line-height类最大值为leading-10,因此无法使用leading-12。
- 还可以创建自定义leading-12类并使用它。










