我想知道我在我的 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;
}
提前感谢您的任何见解。
我也想最终做出响应,但我想那将是另一个问题:)
最佳答案
如果您确定文本只有一行,您可以这样做:
.donateButton a {
display:block;
width:100%;
color:#FFFFFF;
font-size:1em;
text-decoration:none;
line-height:100px;
}
关于html - 如何使用 css 在圆形 div 中垂直居中我的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29813110/