垂直文本不在任何标签的中心

Question

我正在使用字体Calibre，并且该字体未与button，p等任何标签对齐。

我打得很高，没有任何反应。知道这可能是什么原因吗？

让他们知道您是否需要其他详细信息

代码：

button{
 font-family: 'Calibre';
 font-size: 14px;
 padding: 5px 10px;
 background: green;
}

 <button>Sign Up</button>

此代码库中没有其他代码或CSS。我刚刚开始一个新项目，这是我在那写的唯一代码。

PS ：这不是任何其他问题的重复。

Answer 1

啊，我们不喜欢CSS吗？

如果您的HTML是这样的： <button><span>Sign Up</span></button>

尝试将内部文本元素（<span>）的样式与vertical-align: middle，align: center弄混，并可能添加padding-top: 5px之类的填充。您还可以更改line-height: 80%，以缩小其区域内字符下方多余的“空白”。

Answer 2

在带有flex的按钮内垂直居中放置文本：

<button class="btn"> Text </button>

.btn {
    display: flex;
    align-items: center;
}

对于内联/内联块元素，它们的垂直对齐值可能与文本不同。