如何将按钮中的文字居中？

Question

嗨我的site有点问题。我有一个按钮进入标题，但内部文本看起来不对齐。如何使文字成为按钮的一点点？目前有点下降。

这是该按钮的CSS类：

header .popup_link {
    height: 20px;
    padding: 3px 30px !important;
}

如何在按钮内正确分配文本？

Answer 1

添加行高：

header .popup_link{
    line-height: 18px;
}

Answer 2

你的行高为24px，高度为<a> 20px - 只需对其中一个做一些事情。

Answer 3

只需删除身高：

header .popup_link {
  padding: 3px 30px !important;
}

Answer 4

我见过你的网站，你的垂直中心有问题。 使用flex是解决这个问题的最简单方法。

在按钮上添加此css：

display: flex;
align-items: center;

您可以这样设置首选高度。

Answer 5

您可以使用此css规则修复按钮：

.little-head a.blue-btn span{
    display: block;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

注意：我在您的按钮中添加了一个班级.blue-btn。您可以根据需要自由重命名。

此css规则将相对于其父内部垂直对齐内部跨度，在这种情况下是蓝色按钮。 结果为

Answer 6

将ID设为<span>标记，并为id添加此样式：

<style>

#btn_Přihlásit{
text-align: center; 
display: flex;
margin-top: -2px;

</style>

<span id="btn_Přihlásit">Přihlásit se</span>

<强>输出：