如何以css垂直放置在圓形div中的文本

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

這樣做的最簡單方法是從文本中刪除您的填充頂部並將行高設置爲100px，與您的div的高度相同。