Menu
I want to create a button circle link with text inside it but I have problem centering the text inside the circle button. The line height is too large. Any suggestion to this problem?
Here's the code: 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>I'm trying to create a button like this
464
To center the text within the button. Use this code. To center the button, use a parent div to align it to center. Show activity on this post. in your CSS for .btn-work.
Click on the top of the frame (12 o’clock) instead of the bottom. Now when you center the text, it will center along the bottom, but it’ll be upside down. After you put the text along the top, choose Type > Type on a Path > Options. Click the Flip checkbox. Choose Center from the Align pop-up menu, and Center from the To Path popup menu.
Let’s start with the easiest. Note that if you want your text to also be horizontally centered, simply add the text-align property and set it to center in any of the examples below. One of the simplest solutions to vertically centering text is to use top and bottom padding.
That way, you don’t have to create a CSS class or ID just for that element, which you’d then have to add to your stylesheet. If you’re centering an element type on one specific page, you can use internal CSS to center that element without going one-by-one. Just be sure to choose the right CSS selector so that your changes apply.
Flexbox can do that:
.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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
