
tailwindcss 中使用 line-height 和 leading 难以垂直居中的原因
tailwindcss 中使用 line-height 或 leading-* 类无法垂直居中文字元素的原因在于,其提供的最大 leading 值仅为 10,对应 line-height: 2.5rem。当元素的高度为 3rem 时,leading-6 的值(1.5rem)与高度差了一半,导致垂直居中失效。
解决方法:
- 调整高度:将元素的高度减小为 2.5rem 或 2rem,例如 h-10 或 h-8。这样可以使 leading-6 或 leading-8 居中对齐。
- 添加自定义类:手动创建 leading-12 类,并将其应用于元素。该类设置 line-height: 3rem,从而实现垂直居中。
- 使用 flexbox:通过 CSS flex 属性和 justify-content: center 和 align-items: center,可以垂直水平居中元素。
示例代码:
垂直居中文本垂直居中文本
立即学习“前端免费学习笔记(深入)”;










