我想创建一个按钮圆形链接,其中包含文本,但我在将文本置于圆形按钮内居中时遇到问题。行高太大。对这个问题有什么建议吗?
这是代码:https://jsfiddle.net/hma443rL/ https://jsfiddle.net/hma443rL/
.btn-donate {
background: #97c83e;
text-align: center;
width: 149px;
height: 148px;
border-radius: 100%;
display: inline-block;
font-size: 35px;
line-height: 2.3;
vertical-align:middle;
color: white;
font-weight: bold;
text-decoration: none
}
<a href="" class="btn btn-donate">
Donate <span>Us</span>
</a>
我正在尝试创建一个这样的按钮
Flexbox 可以做到这一点:
.btn-donate {
background: #97c83e;
text-align: center;
width: 149px;
height: 149px;
border-radius: 100%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 35px;
color: white;
font-weight: bold;
text-decoration: none
}
<a href="" class="btn btn-donate">Donate <span>Here</span></a>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)