Центр текста на кнопке

Question

Я знаю, что об этом уже спрашивали пару раз, но похоже, что решения не работают в этом случае. По сути, я хочу, чтобы слово «play» было расположено по центру вертикально и горизонтально на этой кнопке. По горизонтали текст ведет себя сам, но по вертикали, независимо от того, что я пытаюсь, он всегда немного ниже, чем должен, во всех браузерах, на которых я его тестировал. У кого-нибудь есть предложения? Спасибо

<style type="text/css">
button {
font-family: Verdana, Geneva, sans-serif;
color: white;
border-style: none;
vertical-align: center;
text-align: center;
}

button:hover {
cursor: pointer;
}

button::-moz-focus-inner /*Remove button padding in FF*/
{ 
border: 0;
padding: 0;
}


.start {
background-color: #0C0;
font-size: 2em;
padding: 10px;

}


</style>
<button type="button" class="start">play</button>

Answer 1

padding на .start - это, вероятно, то, с чем вам придется поиграть, хотя, как он настроен, оно должно быть центрировано, но вы можете разбить его на что-то вроде padding: 8px 10px 10px 10px;

Вы также можете проверить и установить line-height в .start и посмотреть, поможет ли это.

Answer 2

Правильное значение для vertical-align равно middle, а не center. Однако я не уверен, что это будет иметь значение, потому что это может просто повлиять на положение самой кнопки по вертикали относительно окружающего текста. Я уверен, что текст кнопки по умолчанию вертикально центрирован, хотя ...