Вертикальное выравнивание текста в поле ссылки, отрицая наследуемые свойства CSS

Question

скрипку: http://jsfiddle.net/jgallaway81/ax9wh/

<a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton"> 
    LCARS Locomotive O.S. 
</a> 

Моя проблема заключается в текст метки на графике. Я использую этот дизайн кнопки на всем моем сайте, причем только текст и его размер меняются. Когда я изначально разработал систему (на странице: http://www.fccorp.us/development/index.php, а затем снова на http://www.fccorp.us/development/index.fccorp.php), я использовал поля & элементы управления CSS, чтобы получить текст, центрированный по вертикали внутри кнопки. Но это зависело от высоты шрифта static. Теперь я хочу использовать более высокий шрифт и не могу получить вещь до высоты автоцентра. Я попытался

.leftbuttons { 
    width:335px; 
    height:40px; 
    padding:**auto** 
    20px **auto** 
    45px; font-size:1em; 
    border-style:solid; 
    border-width:0px; 
    font-family:Arial; 
    font-weight:900; 
    margin-left:10px; 
    margin-right:20px; 
    margin-top:20px; 
    margin-bottom:20px; 
    text-align:center; 
    display:inline-block; 
    background-image: url(http://img580.imageshack.us/img580/1461/lcarssitebutton.png); 

}

Но все, что в конечном итоге делает рубил изображение вверх.

Я использую .antibutton, чтобы попытаться переопределить несколько деталей из других классов, чтобы получить то, что я пытаюсь получить. Если я смогу решить проблему vertical-align (или какой-нибудь хороший кодер здесь может понять, что чертовски я испортил), я также хочу, чтобы нижняя строка кнопки была выровнена даже с текстовой строкой.

Любые мысли?

Answer 1

Почему бы вам не добавить line-height: к вашим уникальным чехлам?

например, я добавил line-height: 40px; в a.buttonlinks, и он центрирует вертикально просто отлично.