Html вертикальное выравнивание текста внутри кнопки типа ввода

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

как это можно сделать?

UPDATE: это мой код:

CSS

.test1 label {
    float: left;
    clear: left;
    width:31%;
    margin-right:-2px;
}
.test1 input {
    float:left;
    width:69%;
    margin-right:-2px;
}
.testbutton {
    float:left;
    margin-left: 10px;
    height: 22px;
    line-height: 22px;
    text-align:center;
    background-color:#fbfbfb;
    border:1px solid #b7b7b7;
    color:#606060;
    cursor:pointer;
    display:inline-block;
    font:bold 12px/100% Arial, sans-serif;
}

HTML:

<div class="test1">
<label for="test" title="test">test</label>                                
<input style="width:18px; float:left;" type="checkbox" name="test" id="test" tabindex="5" />
<input class="testbutton" id="testbutton" style="width:60px;"type="button" value="Import" /></div>

Ответы

Ответ 1

Попробуйте добавить свойство line-height: 22px; в код.

Ответ 2

Вместо этого используйте тег <button>. По умолчанию <button> по вертикали по центру.

Ответ 3

Я отказался от попыток выровнять текст на кнопках! Теперь, если мне это нужно, я использую теги <a>, например:

<a href="javascript:void();" style="display:block;font-size:1em;padding:5px;cursor:default;" onclick="document.getElementById('form').submit();">Submit</a>

Итак, если размер шрифта документа равен 12px, мой "button" будет иметь высоту 22px. И текст будет вертикально выровнен. Это в теории, потому что в некоторых кассах неравномерное заполнение "6px 5px 4px 5px" выполнит свою работу.

Несмотря на то, что это хак, этот метод довольно хорош для решения проблем совместимости в старых браузерах, например IE6!

Ответ 4

Я обнаружил, что использование фиксированной ширины с заполнением, по-видимому, работает (по крайней мере, по крайней мере)

.Btn
 {
   width:75px;
   padding:10px;
 }

Попробуйте: -

http://jsfiddle.net/stevenally/z32kg/

Ответ 5

Вы можете использовать flexbox (проверьте поддержка браузера, в зависимости от ваших потребностей).

.testbutton {
  display: inline-flex;
  align-items: center; 
}

Ответ 6

Если ваша кнопка не была перемещена, вы можете использовать vertical-align:middle;, чтобы центрировать текст внутри нее. После многих экспериментов это было единственным решением, которое я смог найти в IE без изменения разметки. (в Chrome текст кнопки кажется автоматически центрированным без этого взлома).

Но вы используете float:left, который заставляет элемент быть блочным элементом (ваш display:inline-block игнорируется), который, в свою очередь, препятствует работе вертикального выравнивания, потому что вертикальный выравнивание не работает внутри элемента блока.

Итак, у вас есть три варианта:

  • прекратить использование float в этой форме и использовать элементы inline и inline-block для имитации плавающего.
  • как примечание @stefan выше, используйте другой элемент, такой как <a> и использовать javascript для отправки формы.
  • согласитесь, что в IE ваши кнопки будут отключены на 1px по вертикали.

Ответ 7

Самое простое, что вы можете сделать, это использовать reset.css. Он нормализует таблицу стилей по умолчанию в браузерах и по совпадению позволяет кнопке {vertical-align: middle; }, чтобы работать нормально. Дайте ему шанс - я использую его практически во всех своих проектах, чтобы убить такие маленькие ошибки.

https://gist.github.com/nathansmith/288292

Ответ 8

У меня была кнопка, в которой background-image была тень под ней, поэтому выравнивание текста было отключено сверху. Изменение line-height не помогло бы. Я добавил padding-bottom к нему, и он сработал.

Итак, что вам нужно сделать, это определить line-height, с которым вы хотите играть. Так, например, если у меня есть кнопка, высота которой действительно 90px, но я хочу, чтобы строка-высота была 80px, у меня было бы что-то вроде этого:

input[type=butotn].mybutton{
    background: url(my/image.png) no-repeat center top; /*Image is 90px x 150px*/
    width: 150px;
    height: 80px; /*shadow at the bottom is 10px (90px-10px)*/
    padding-bottom: 10px; /*the padding will make up for the lost height while maintaining the line-height to the proper height */

}

Надеюсь, это поможет.