html - 按钮文本以 Windows 为中心，但不在 Linux/android CSS 中

Question

我正在处理一个网页，我对按钮文本的垂直对齐有一个奇怪的问题。我正在使用 Materialize 框架和自定义字体，但正如我们在图片中看到的那样，在 windows 中是完全对齐的，但在 linux 和 Android 中却不是：

窗口捕获：

Linux 捕获：

任何人都知道如何解决这个问题？我尝试添加填充，但它在 linux 中运行良好，在 windows 中运行不佳。我也将 line-height 设置为 1，vertical-align center，但没有任何效果。

提前致谢！！

编辑

按钮代码：

.btn {
  width: 100px;
  font-family: 'X';
  font-size: 0.85em;
}

.green {
  background-color: #00cd78 !important;
}

<button type="submit" class="btn waves-effect waves-light green submit-btn right">login</button>

其余的是这些类的 Materialize 的默认样式。

标签： htmlcssalignmentmaterialize

Answer 1

只需使用 - 编辑您的.btn课程 CSS -

.btn {
   width: 100px;
   font-family: 'X';
   font-size: 0.85em;
   display: flex;
   justify-content: center;
   align-items: center;
 }