Кнопка CSS - вертикальный центр текста

У меня есть кнопка, которая представляет собой простой тег привязки в стиле следующего:

.buyBtn{ 
   background:url(../images/buyBtn.png) no-repeat; 
   padding-top:4px; 
   width:97px;     
   height:28px; 
   margin-top:14px;
}
.buyBtn a{
   color:#fff!important; 
   font-weight:normal!important; 
   text-decoration:none;
   padding-left:27px;  
   padding-top:12px; 
   text-shadow:none!important;
}

У меня возникают проблемы с вертикальным центрированием текста внутри кнопки, в некоторых устройствах оно выглядит нормально, но в других - в центре.

Можно ли рекомендовать способ исправить это или лучшее решение для достижения того же результата?

Приветствия

Ответы

Ответ 1

HTML:

<div class="buyBtn"><a href="#">Button</a></div>

CSS

.buyBtn{ 
    background:url(../images/buyBtn.png) no-repeat; 
    width:97px;     
    height:28px; 
    display: table-cell;
    vertical-align: middle;
}

.buyBtn a{
    color:#fff!important; 
    font-weight:normal!important; 
    text-decoration:none;
    padding-left:27px;
    text-shadow:none!important;
}

Не нужно использовать padding-top или margin-top для вертикального выравнивания. Просто используйте display: table-cell; и vertical-align: middle;. Вот оно.

Ответ 2

Используйте высоту линии, чтобы центрировать ее по вертикали. Обычно я использую то же значение, что и его высота.

Ответ 3

Вы пытались установить размер шрифта в свою ссылку? У каждого браузера, вероятно, свой собственный размер по умолчанию, поэтому это может быть подсказка. Будьте осторожны с заполнением и шириной/высотой, вам нужно уменьшить размер блока, если вы добавите прокладку, потому что добавка включена в ширину. Например, простой блок ширины 100px без заполнения будет иметь размер 100px: ok. Добавьте padding-left: 10px;, и ваш блок теперь имеет ширину 110 пикселей.;)

Ответ 4

Я бы использовал line-height как bchhun, как упоминалось. Кроме того, padding-top и padding-bottom могут помочь.

Ответ 5

Вы можете скопировать этот код и поместить его в виде CSS и настроить все, что вам нужно

.btn-allignment{
    width: 88px;
    height: 40px;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    line-height: 40px;
    margin-top: 9px;
    text-align: center;
}