将文本在圆形按钮上居中
我想创建一个内部带有文本的按钮圆形链接,但我无法将圆形按钮内的文本居中。线条高度太大。对这个问题有什么建议吗?
代码如下:https://jsfiddle.net/hma443rL/
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.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可以做到这一点:
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.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>
相关文章