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

свойство line-height обычно заботится о вертикальном выравнивании, но не с входными данными. Есть ли способ автоматически центрировать текст, не играя с заполнением?

16 67
css xhtml-1.0-strict

16 ответов:

в 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 после input-statement)

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

10

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

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

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

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

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

94

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

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

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

57

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

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

ура! ДЖП

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

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

4

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

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

1 пиксель сверху
1 пиксель дно!--6--> 8 пиксельная верхняя прокладка
8 пикселей отступ снизу
22 пиксельный шрифт размер

1 + 1 + 8 + 8 + 22 = 40 пиксели точно.

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

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

3

попробуй :

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

потому что в некоторых версиях IE (

3

после долгих поисков и разочарований комбинация установки высоты, высоты линии и отсутствия заполнения работала для меня при использовании фонового изображения с фиксированной высотой (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;
}
1

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

1

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

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

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

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

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

1

перейти к line-height.

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

0

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

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

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

Ура!

LaddtheImpaler

0

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

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

height:25px;
0

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

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

0

в CSS я применил это на текстовом поле, и это сработало для меня. 

text-align: center;
0

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

display: table-cel

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

Vertical-Align: Middle;

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

-10