
tailwindcss中的line-height和leading属性不起作用?如何垂直居中元素?
在TailwindCSS中,设置leading-*属性并不能保证垂直居中元素。这是因为h-*属性设置了元素的高度,而leading-*属性设置了行高,这两个值可能不匹配。
问题示例:
在上面的示例中,leading-6(实际值为line-height:1.5rem)和h-12(实际值为height: 3rem)的实际值不匹配,因此元素无法垂直居中。
解决方法:
立即学习“前端免费学习笔记(深入)”;
为了垂直居中元素,可以使用以下方法:
方法 1:
- 通过flex类设置父元素为 flexbox 布局。
- 设置items-center类,使子元素在 flexbox 中垂直居中。
方法 2:
- 缩小元素的高度,使其与 line-height 匹配。例如,使用 h-10 代替 h-12。
自定义leading-12类:
也可以自己定义一个leading-12类,并在需要垂直居中的元素上使用它:
.leading-12 {
line-height: 2.5rem;
}










