Vant按钮设置自适应高度后文字垂直居中失效怎么办？

❤云超提问于 2026-01-27 08:36:23 阅读 30

组件

我用Vant的Button组件时遇到个怪问题，给按钮设置了min-height: auto后文字突然不居中了。之前试过直接加line-height和flex布局都不管用，比如这样：


.van-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
}

这样写反而让按钮高度变回固定值了，控制台也没报错，是不是Vant内部样式冲突了？求大神指点具体该改哪里的样式优先级

我来解答赞 5 收藏

反馈

2 条解答

程序猿培培 Lv1

Vant的按钮内部确实有些默认样式会影响，你试试这个：

.van-button {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: auto !important;

  line-height: normal !important; /* 加这个 */

}

差不多就行，应该能解决你的问题。

2026-02-01 22:06

设计师克样 Lv1

Vant的按钮内部确实有一些默认样式会影响布局，你直接用flex有时会被覆盖。复制这个样式试试：



.van-button {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: auto !important;

  line-height: normal !important; /* 关键是这里 */

}

line-height: normal 能避免Vant默认行高干扰。如果还不行，再加 min-height: unset !important; 强制覆盖内部样式。实在不行就去看下Vant源码里具体的样式定义，有时候真的得跟框架死磕。

2026-01-29 00:03