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

Ответ 1

В 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. Должно облегчить вам правильное положение, если оно должно работать только в одном конкретном браузере.

Ответ 2

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

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

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

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

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

Ответ 3

Я не пробовал это сам, но попробую установить:

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

Где 36px - высота вашего ввода.

Ответ 4

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

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

ура! В JP

Ответ 5

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

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

Ответ 6

Попробуйте:

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

Так как в некоторых версиях IE (< 9) высота свойства неправильно интерпретируется.

Ответ 7

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

Мне понадобилось поле ввода текста, которое должно быть ровно 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, но я его не тестировал. Пожалуйста, дайте мне знать, и я отредактирую это сообщение соответственно.

Ответ 8

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

.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;
}

Ответ 9

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

Ответ 10

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

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

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

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

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

Ответ 11

Перейдите к line-height.

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

Ответ 12

Извините заранее простой ответ...

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

На самом деле я создаю один из них, который включает в себя многоступенчатый и css-индикатор выполнения в WordPress... основанный на популярном плагине Contact Form 7, и он отлично выглядит. Дайте мне знать, если вы хотите скриншот.

Ура!

LaddtheImpaler

Ответ 13

этот пример может решить ваши проблемы навсегда:

добавьте это во входное свойство css и никогда не добавьте% вместо px:

height:25px;

Ответ 14

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

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

Ответ 15

Вам нужно установить вертикальное выравнивание так:

Vertical-Align: Middle;