Центрирование текста над кнопкой CSS

Question

Я играю с CSS и кнопками, и мне бы хотелось, чтобы текст History находился над центром кнопки, но он отображается в верхней части ячейки. Как я могу получить его в середине по вертикали?

CSS

a.button { 
background: url(button.png) no-repeat 0 0; 
width: 150px; 
height: 62px; 
display: block; 
} 

HTML

<td align="center" valign="middle" > 
<a href="history.htm" class="button"/><b>HISTORY</b></a> 
</td> 

Answer 1

Если это только одна строка текста, чем я обычно использую line-height = height

a.button { 
 
    background: green; 
 
    width: 150px; 
 
    height: 62px; 
 
    display: block; 
 

 
    line-height: 62px; 
 
    text-align: center; 
 
}

<a href="history.htm" class="button"/><b>HISTORY</b></a>

Answer 2

Использование «Вертикальный выровнять: средний;» в вас правило a.button css.