Vuido 中如何让按钮文字垂直居中对齐？

胜楠~ 提问于 2026-03-17 22:51:24 阅读 10

框架

我在用 Vuido 开发桌面应用时，发现按钮里的文字总是偏上，试了 vertical-align 和 line-height 都没用。查文档说 Vuido 用的是原生控件，但样式又支持部分 CSS，有点搞不清到底哪些属性生效。

下面是我写的样式，按理说应该能居中，但实际显示还是靠上：

button {
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
}

Vuido 桌面应用

我来解答赞 0 收藏

反馈

1 条解答

程序猿雨帆 Lv1

Vuido 的按钮是原生系统控件，vertical-align 和 line-height 对原生按钮根本不起作用，这个是底层限制，不是你的用法问题。

解决办法是把 height 改成 padding，让文字通过内边距自动居中：

button {

  padding-top: 10px;

  padding-bottom: 10px;

  padding-left: 20px;

  padding-right: 20px;

  box-sizing: border-box;

}

或者直接简写：

button {

  padding: 10px 20px;

  box-sizing: border-box;

}

box-sizing: border-box 加上，这样 padding 就不会把按钮撑大了。

Vuido 支持的 CSS 属性很有限，基本上就是 padding、margin、background、color、font-size 这些基础属性，flex 布局之类的别想了，能用 padding 解决的就用 padding。

2026-03-17 23:09