Вертикально выровнять текст в поле ввода фиксированной высоты без отображения: таблицы или заполнения?

Сам не пробовал, но попробуйте установить:

height : 36px; //for other browsers
line-height: 36px; // for IE

Где 36 пикселей - это высота вашего ввода.

В Opera 9.62, Mozilla 3.0.4, Safari 3.2 (для Windows) это помогает, если вы поместите текст или хотя бы пробел в той же строке, что и поле ввода.

<div style = "line-height: 60px; height: 60px; border: 1px solid black;">
    <input type = "text" value = "foo" />&nbsp;
</div>

(представьте & nbsp после оператора ввода)

IE 7 игнорирует все попытки взлома CSS. Я бы рекомендовал использовать отступы только для IE. Должен упростить вам правильное размещение, если он должен работать только в одном конкретном браузере.

Я сам столкнулся с этой проблемой. Я обнаружил, что не указание высоты ввода, а использование сочетания font-height и padding приводит к вертикально выровненному тексту.

Например, допустим, вы хотите иметь поле ввода высотой 42 пикселя с размером шрифта 20 пикселей. Вы можете просто найти разницу между высотой ввода и размером шрифта, разделить ее на два и установить отступ на это значение. В этом случае у вас будет 22 пикселя для заполнения, то есть по 11 пикселей с каждой стороны.

<input type = "text" style = "padding: 11px 0px 11px 0px; font-size: 20px;" />

Это даст вам поле ввода высотой 42 пикселя с идеальным вертикальным выравниванием.

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

После долгих поисков и разочарований у меня сработала комбинация установки высоты, высоты строки и отсутствия отступов при использовании фонового изображения с фиксированной высотой (24 пикселя) для поля ввода текста.

.form-text {
    color: white;
    outline: none;
    background-image: url(input_text.png);
    border-width: 0px;
    padding: 0px 10px 0px 10px;
    margin: 0px;
    width: 274px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
}

Просто не устанавливайте высоту поля ввода, установите только размер шрифта, это будет нормально

На мой взгляд, лучший ответ на этой странице, набравший наибольшее количество голосов, но его математика была неправильной, и я не мог ее прокомментировать.

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

Граница в 1 пиксель сверху
Нижняя граница в 1 пиксель Отступ сверху 8 пикселей Отступ снизу 8 пикселей Размер шрифта 22 пикселя

1 + 1 + 8 + 8 + 22 = ровно 40 пикселей.

Следует помнить, что вы должны удалить свойство высоты css, иначе эти пиксели будут добавлены к вашей общей сумме, указанной выше.

<input type = "text" style = "padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" />

Это работает в Firefox, Chrome, IE 8 и Safari. Я могу только предположить, что если что-то подобное работает в IE8, оно должно работать аналогичным образом в 6, 7 и 9, но я не тестировал это. Пожалуйста, дайте мне знать, и я соответствующим образом отредактирую этот пост.

Если ваш элемент является блочным элементом, содержащимся / или с таким отображением:

display: table-cel

Или, с фиксированной высотой строки, вы можете установить вертикальное выравнивание следующим образом:

Vertical-Align: Middle;

В других случаях это не сработает, но в этих условиях работает нормально.

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

    #search #searchbox {
    height: 21px;
    line-height: 21px;
}

ваше здоровье! JP

Вот как я это делаю.

<ul>
   <li>First group of text here.</li>
   <li><input type = "" value = "" /></li>
</ul>

затем внутри вашего файла CSS

ul li {
  display: block;
  float: left;
}

Это должно сработать для вас.

Пытаться :

height: 21px;
line-height: 21px; /* FOR IE */

Потому что в некоторых версиях IE (<9) высота свойства не интерпретируется должным образом.

Выберите line-height.

Тег vertical-align отлично подходит для кнопки отправки, но не для текста в поле ввода. Установка line-height на высоту поля ввода работает во всех браузерах. Включая IE7.

input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

это правильный способ установить вертикально-среднее положение.

Вам следует удалить текст заголовка и использовать поле ввода для заголовка метки. После этого немного поработают визуальные элементы и CSS, и ваша форма будет выглядеть компактной и удобной для пользователя. Я знаю о недостатках, но это полностью избавит от борьбы за выравнивание.

Поздно к вечеринке, но текущие ответы не будут работать, если у вас есть box-sizing: border-box set (который в наши дни многие люди делают для элементов формы).

Просто сбросьте размер окна для IE8 на box-sizing: content-box;, затем используйте один из ответов о заполнении / высоте.

Внутреннее вертикальное выравнивание будет зависеть от высоты шрифта и высоты ввода, поэтому его можно отрегулировать с помощью отступов !!!

Попробуйте что-нибудь вроде:

.InVertAlign {
   height: 40px;
   line-height: 40px;
   font-size: 2em;
   padding: 0px 14px 3px 5px;
}

...

<input type = "text" class = "InVertAlign" />

Не забудьте настроить значения в классе css в соответствии с вашими потребностями!

Я просто работал над этим в текстовых входах MaterialUI. Добавление padding-top: 0.5rem в стиль ввода у меня сработало. Пока вы настраивали отступы, по крайней мере, вам не нужно беспокоиться о корректировке обновлений, не говоря уже о различных точках останова.