Медная поляна

Версия браузера за номером 3.6 научилась вертикально выравнивать содержимое текстовых полей <input type="text"> строго по центру. Каюсь, заметил совсем недавно. По-видимому, на такое поведение повлиял подросший движок Gecko 1.9.2. Вот небольшой пример для наглядности:

HTML:

<form action="">
    <input type="text" name="search" class="text">
</form>

CSS:

input.text {
    height: 28px; width: 150px;
    padding: 0 3px; border: 1px solid #808080;
    font: 13px Arial, sans-serif;
    color: #8b0000;
}

Выравнивание в текстовом поле в браузере Firefox

Получается, что Firefox ниже версии 3.6 не умеет вертикально центрировать текст при указании высоты поля. Добавим сюда также IE8 со всем своим умирающим семейством (на рисунке их нет, придется принять на веру).

А как сделать кроссбраузерно? Заглянул в Google, люди рекомендуют одновременно указывать для текстового поля верхний padding-top и нижний отступ padding-bottom и не использовать свойство height .

Дополнение. Все-таки люди говорят не всю правду. Посмотрел, height тоже надо указывать, чтобы избежать проблем с масштабированием в некоторых браузерах. Тогда видимая высота поля будет равна height + padding-top + padding-bottom + border-top + border-bottom .

4 комментария

dreamhelg

Я использую метод, предложенный Иваном Сагалаевым: указываем высоту блока, а внутренному тексту назначаем line-height равным высоте блока. Ну и конечно блоку overflow:hidden. Правда такой метод годится только для однострочных текстов, но в инпутах других и не бывает.

@dreamhelg

Да, для обычных блоков это работает, но не для input. Например

input.text {overflow:hidden; height:40px; line-height:40px;}

и посмотрите в Fx 3.5. Текст все равно оказывается вверху поля.

alexpts

У меня такая ерунда в хроме почему-то, FF и опера последние нормально центрируют, а вот хром все выше отображает

Не пугайте ;) Лучше покажите код, где Chrome "косит"