центрирующий текст на кнопке круга

Question

Я хочу создать ссылку на круг кнопки с текстом внутри него, но у меня проблема с центрированием текста внутри кнопки круга. Высота линии слишком велика. Любое предложение по этой проблеме?

Вот код: 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>

Я пытаюсь создать кнопку, как этот

Answer 1

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>

Answer 2

Если добавить еще один элемент в разметке можно центрировать с помощью комбинации относительных положений и transform

.btn-donate { 
 
    background: #97c83e; 
 
    text-align: center; 
 
    width: 149px; 
 
    height: 148px; 
 
    border-radius: 100%; 
 
    display: inline-block; 
 
    font-size: 35px; 
 
    vertical-align: middle; 
 
    color: white; 
 
    font-weight: bold; 
 
    text-decoration: none 
 
} 
 
.wrapper { 
 
    display: block; 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<a href="" class="btn btn-donate"> 
 
    <span class="wrapper">Donate <span>Us</span></span> 
 
</a>

Answer 3

Используйте inline-block s, чтобы выровнять их по вертикали вместо использования line-height, как here.

Я переместил полный текст внутри span в разметке

фрагмента ниже:

.btn-donate { 
 
    background: #97c83e; 
 
    text-align: center; 
 
    width: 149px; 
 
    height: 148px; 
 
    border-radius: 100%; 
 
    display: inline-block; 
 
    font-size: 35px; 
 
    vertical-align: middle; 
 
    color: white; 
 
    font-weight: bold; 
 
    text-decoration: none 
 
} 
 
a.btn.btn-donate span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
a.btn.btn-donate:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
}

<a href="" class="btn btn-donate"><span>Donate Us</span></a>

Answer 4

Я обычно неравнодушен к использованию свойств отображения таблицы, но я считаю, это будет соответствовать вашим требованиям здесь просто отлично. Это требует минимальных корректировок стиля и разметки.

.btn-donate span { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 

 
.btn-donate { 
 
    background: #97c83e; 
 
    text-align: center; 
 
    width: 149px; 
 
    height: 148px; 
 
    border-radius: 100%; 
 
    display: table; 
 
    font-size: 35px; 
 
    vertical-align: middle; 
 
    color: white; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
}

<a href=""class="btn btn-donate"><span>Donate Us</span></a>