元素
元素
工具
博客
问答

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

胜楠~ 阅读 104
框架

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

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

button {
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
}
Vuido桌面应用
我来解答 赞 8 收藏
二维码
手机扫码查看
反馈
2 条解答
W″米阳
W″米阳 Lv1
当时我也卡在这，折腾了一阵子。Vuido 用原生控件这点确实挺坑的，有些 CSS 属性就是不生效。你提到的 vertical-align 和 line-height 在这种情况下确实不太管用。

后来我发现了一个 workaround，就是用 Flexbox 来布局。这样可以更好地控制子元素的对齐方式。你可以试试下面的样式：

button {

  height: 40px;

  display: flex;

  align-items: center; /* 垂直居中 */

  justify-content: center; /* 水平居中 */

  text-align: center; /* 这个也可以保留，以防万一 */

}


这个方法对我挺有效的，希望对你也有帮助。
点赞
2026-03-21 16:09
程序猿雨帆
程序猿雨帆 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
相关推荐
元素
元素
工具
博客
问答
登录/注册