CSS Как правильно заменить ссылки на фон кнопки - PullRequest
Новая
       6

CSS Как правильно заменить ссылки на фон кнопки

1 голос
/ 22 ноября 2011

Я пытаюсь заменить ссылки в моем приложении на фон кнопки.Однако текст ссылки не будет центрироваться ни по горизонтали, ни по вертикали.Я использую свойство "background-position: center center;"что, я предполагаю, решит мою проблему.

Мой HTML: 

<a class="violetButtonLarge" href="#">My Link</a>

CSS: 

.violetButtonLarge {
    display: block; 
    width: 304px; 
    height: 41px;
    background: url(../images/violetButton_large.png) no-repeat center center;
    border:none;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Arial;
    background-color: transparent;
    text-decoration: none;
}

Мое изображение:

enter image description here

Что я тут не так делаю?Вот что я получаю:

enter image description here

Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 22 ноября 2011

Используйте text-align:center и line-height:41px для выравнивания текста по вертикали и горизонтали по центру.

.violetButtonLarge {
    display: block; 
    width: 304px; 
    height: 41px;
    background: url(http://i.stack.imgur.com/S8zvb.png) no-repeat center center;
    border:none;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Arial;
    background-color: transparent;
    text-decoration: none;
    text-align:center;
    line-height:41px;
}

Пример: http://tinkerbin.com/q5VZR1At

0 голосов
/ 22 ноября 2011

Возможно, вам следует установить отступы, тогда вам не нужно устанавливать ширину и высоту.vertical-align: baseline помогает установить их в одной строке с «настоящими» кнопками ввода. 

.button {
  padding: .4em 1.6em .44em 1.6em;
  vertical-align: baseline;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

Редактировать: Извините, я не видел изображения в вашем коде, возможно, вам стоит взглянуть на этоотличный пример: CSS Gradient Buttons .

0 голосов
/ 22 ноября 2011 
a.button {
    background: transparent url('violetButton_large.png') no-repeat scroll top right;
    color: #FFFFFF;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; 
    text-decoration: none;
}
<a class="button" href="#" onclick="this.blur();"> … </a>
...