вертикальный центрирующий текст во входной кнопке или кнопке с изображением

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

HTML:

<button type="submit" class="button validate">Submit</button> 
<input type="submit" class="button validate" value="Submit"></input> 
<input type=" button " class="button validate " value="Submit"></input>

CSS:

.button { 
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat; 
    cursor: pointer; 
    border: none; 
    display: inline-block; 
    line-height: 29px; 
    vertical-align: middle; 
    text-align: center; 
    width: 110px; 
    height: 29px; 
    color: white; 
    padding: 0; 
    font-size: 14px; 
    margin: 0; 
}

JSFIddle: http://jsfiddle.net/M7nv6/

EDIT: Комментарии ниже предположил, что текст центрируется по вертикали. Это не выглядит так, из-за тени изображения. Я не могу изменить фон изображения, он создан дизайнером и должен его использовать.

Добавление дополняющего основания помогло.

источник

2013-07-14 renathy

Текст идеально центрирован на всех 3-х примеров. Фоновая картинка - ваша проблема, она слишком мала. – slash197

см. Мой [DEMO] (http://jsfiddle.net/M7nv6/9/) –

Вы можете проверить это:

.button { 
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat; 
    cursor: pointer; 
    border: none; 
    display: inline-block; 
    line-height: 0px; 
    text-align: center; 
    width: 110px; 
    height: 29px; 
    color: white; 
    padding: 0; 
    padding-bottom: 7px; 
    font-size: 14px; 
    margin: 0; 
}

источник

2013-07-14 10:42:41 Farshid

текст центрирован по вертикали, однако у вашего изображения есть тень, а ваша кнопка (на изображении) действительно меньше по высоте, чем 29 пикселей. (? 25px)

линии изменения высоты меньшего и выровнять текст к началу

источник

2013-07-14 10:40:29

Поскольку вы используете фоновое изображение с тенью вы можете добавить дно например: padding: 0 0 5px; (приспосабливайтесь к вашим потребностям).

Возможно, было бы лучше заменить полное изображение на css. Вы можете получить почти тот же результат примерно с таким же количеством кода, сохранив некоторые (в данном случае, 1) HTTP-запросы.

источник

2013-07-14 10:43:42

Поскольку вы используете фоновое изображение, вы можете также использовать дополнение для выравнивания. НО я хотел бы рассмотреть не использовать фоновое изображение и вместо того, чтобы с помощью CSS PUR

DEMO http://jsfiddle.net/M7nv6/

.button { 
    color: rgba(255, 255, 255, 1); 
    text-decoration: none; 
    background-color: rgba(219, 87, 5, 1); 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: 0px 9px 25px rgba(0, 0, 0, .7); 
    -moz-box-shadow: 0px 9px 25px rgba(0, 0, 0, .7); 
    box-shadow: 0px 9px 25px rgba(0, 0, 0, .7); 
    display: inline-block; 
    line-height: 29px; 
    vertical-align: middle; 
    text-align: center; 
    width: 110px; 
    height: 29px; 
    color: white; 
    padding: 0; 
    font-size: 14px; 
    margin: 0; 
    border:none; 
}

источник

2013-07-14 10:50:58 Vector

вы должны использовать обивку-дно для этого. но вот точка, которую вы не можете использовать paddings с высотой или шириной. все идет отлично, без высоты!

.button { 
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat; 
    cursor: pointer; 
    border: none; 
    display: inline-block; 
    line-height: 29px; 
    vertical-align: middle; 
    text-align: center; 
    width: 110px; 
    color: white; 
    padding: 0 0 8px; 
    font-size: 14px; 
    margin: 0; 
}

источник

2013-07-14 10:53:54 bita

это отличная идея, это спасает мою жизнь ... –

Вы также можете переместить фон, так что подходит для вашего текста:

.button { 
background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat 0px 4px;; 
cursor: pointer; 
border: none; 
display: inline-block; 
line-height: 29px; 
vertical-align: middle; 
text-align: center; 
width: 110px; 
height: 29px; 
color: white; 
padding: 0; 
font-size: 14px; 
margin: 0; 
}

источник

2013-07-14 11:13:55 Marteens

вертикальный центрирующий текст во входной кнопке или кнопке с изображением

ответ

Смежные вопросы