Вертикальне вирівнювання тексту в полі введення фіксованої висоти без відображення: таблиця чи відступ?

Властивість line-height зазвичай дбає про вертикальне вирівнювання, але не за допомогою входів. Чи є спосіб автоматично центрувати текст, не граючись з підбиванням?

В 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. Це повинно спростити вам правильне розташування, якщо воно має працювати лише в одному певному браузері.

Я сам зіткнувся з цією проблемою. Я виявив, що не вказуючи висоту введення, а використовуючи комбіновану висоту шрифту та відступи, виходить вертикально вирівняний текст.

Наприклад, скажімо, ви хочете мати вікно вводу висотою 42 пікселі з розміром шрифту 20 пікселів. Ви можете просто знайти різницю між введеною висотою та розміром шрифту, розділити її на два та встановити таку кількість відступів. У цьому випадку у вас буде загальний об’єм заповнення 22 пікселі, тобто 11 пікселів на кожній стороні.

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

Це дасть вам 42-піксельну коробку вводу висотою з ідеальним вертикальним вирівнюванням.

Сподіваюся, що це допомагає.

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

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

Де 36 пікселів - це висота введеного тексту.

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

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

ура! JP

На мою думку, відповідь на цій сторінці з найбільшою кількістю голосів є найкращою відповіддю, але його математика була неправильною, і я не міг її коментувати.

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

1 піксельна межа зверху
1 піксель рамка знизу
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, але я не тестував цього. Будь ласка, дайте мені знати, і я відповідно відредагую цю публікацію.

Йди на line-height.

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

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

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

це правильний спосіб встановити вертикальне середнє положення.

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

Ось як я це роблю.

<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) висота властивості неправильно трактується.

Пізно на вечірку, але поточні відповіді не спрацюють, якщо у вас є 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до стилю введення працювало у мене. Поки це було коригування заповнення, принаймні вам не потрібно турбуватися про коригування для оновлень, а тим більше різних точок зупинку.

Вам слід видалити текст заголовка та використовувати введення заповнювача для заголовка вашої етикетки. Деякі візуальні та CSS працюють після цього, і ваша форма буде виглядати щільно та зручно для користувача. Я знаю про недоліки, але це повністю полегшить боротьбу з вирівнювання.

Якщо ваш елемент є блочним елементом, що міститься / або з таким відображенням:

display: table-cel

Або, з фіксованою висотою лінії, ви можете встановити вертикальне вирівнювання так:

Vertical-Align: Middle;

Для інших випадків це не спрацює, але за цих умов це чудово працює.