如何将我的文本在 div 和 css 的圆形中垂直居中

Question

我想知道我在 css 中忽略了什么，这会阻止文本正确地垂直居中？下面是我当前的代码，and here is a fiddle.

这是我的 html

<div class="donateButton"><a href="#">Donate</a></div>

这是我的CSS

.donateButton {
width:100px;
height:100px;
background-color:#FE6D4C;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin:0 auto 30px;
text-align:center;
}
.donateButton:hover {
background-color:#09C;
}
.donateButton a {
display:block;
width:100%;
color:#FFFFFF;
font-size:1em;
text-decoration:none;
padding-top:50%;
line-height:1em;
margin-top:0.5em;
}

提前感谢您的任何见解。

我也想最终做出响应，但我想那将是另一个问题:)

Answer 1

如果您确定文本只有一行，您可以这样做：

.donateButton a {
    display:block;
    width:100%;
    color:#FFFFFF;
    font-size:1em;
    text-decoration:none;
    line-height:100px;
}

Answer 2

最简单的方法是从文本中删除 padding-top 并将行高设置为 100px，与 div.

的高度相同

如何将我的文本在 div 和 css 的圆形中垂直居中

How to center my text vertically in a circular div with css

html

css

geometry