Кроссбраузерное выравнивание кнопок-изображений в формах

Cтандартное отображение формы в нескольких популярных браузерах

Часто при верстке дизайна сталкиваюсь с необходимостью использовать в формах графические кнопки вместо стандартных.

Как известно каждому, даже начинающему HTML-кодеру, по дефолту, с отображением этих кнопок у браузеров есть проблемы — они попросту прыгают, относительно текстового поля по вертикали.

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

Одни умудряются загонять формы в таблицы и выравнивать поля по вертикали в ячейках, что ведет к увеличению объема XHTML-кода. Другие обертывают форму в <div>...</div> и подгоняют кнопку по вертикали с помощью CSS-свойств margin.

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

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

Для начала, возьмем простенькую форму из рисунка выше.

XHTML-код:

1
2
3
4
<form name="searchForm" id="searchForm" action="...">
<input type="text" id="searchInput" size="20" maxlength="50" />
<input type="image" id="searchButton" src="button.gif" alt="Поиск" />
</form>

Далее можно идти к цели двумя путями: написать CSS для каждого из полей через id или присвоить им общий class. Если форма большая и в ней много полей, то я предпочитаю class, в примере же можно писать стили для id, предварительно сгруппировав их.

CSS-код:

1
2
3
#searchInput, #searchButton {
vertical-align: middle;
}

Да, на самом деле это все. Решение эффективное и простое в использовании. Теперь можно сколько угодно менять размер шрифта, элементы формы всегда будут выровнены относительно друг друга по вертикали.

Можете протестировать форму ниже в IE 6,7, Mozilla и Opera — везде отображается одинаково.

P.S. Если бы мы использовали class, то CSS-код выглядел бы так:

1
2
3
.vAlignMiddle {
vertical-align: middle;
}

Ну и не забудьте прицепить этот класс к полям формы. Успехов в верстке!

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 13

  1. Обработка форм на JavaScript, 09.09.2008 в 1:07

    [...] внимание оформлению форм. Советую прочесть статью «Кроссбраузерное выравнивание кнопок-изображений в ...», сэкономите себе много времени [...]

    Ответить

  2. Timur, 07.12.2008 в 22:49

    Спасибо, даже не ожидал, что решается так просто :)

    Обычно мутил с margin'ами.

    А откуда такое поведение? Ведь vertical-align — это свойство ячеек таблицы?

    Кстати, в Safari (и, естественно в Chrome) тоже прекрасно работает.

    Ответить

  3. rotor, 08.12.2008 в 10:27

    Ведь vertical-align — это свойство ячеек таблицы?

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

    Ответить

  4. sikwel, 27.05.2009 в 11:55

    пипец, ты автор жжешь)

    естественно у тебя в примере будет по вертикали все отлично, элементы то одинакового размеру))

    а вот у меня не все так гладко)) если размер поля ввода побольше поставишь, то нахер все едет))

    #search input{

    vertical-align: middle;

    }

    Ответить

  5. rotor, 27.05.2009 в 21:36

    @sikwel, покажите пример, ато складывается впечатление, что вы не понимаете о чем говорите.

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

    Ответить

  6. Анна, 16.08.2009 в 16:37

    Огромное спасибо за статью! Вы — гений. Несколько часов убила на выравнивание. Мутила с маргинами, padding и т.д. Все бес толку. Даже не думала, что vertical-align применим к изображениям. Спасибо!

    Ответить

  7. sikwel, 17.08.2009 в 21:11

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

    А вот вопросик, наверное в тему, разбираюсь с выравниванием подобным, только не изображений, а кнопок заданный тем же тегом , кроссброузерно никак не получается... и решение найти не могу... но точно знаю что решение есть и оно очень простое... вот только кто-бы подсказал (:

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

    з.з. ы наверное для всех новичков в верстке, выравнивание элементов форм — кошмарный сон))

    Ответить

  8. rotor, 18.08.2009 в 16:19

    @sikwel, выложите куда-нибудь пример, посмотрим.

    Ответить

  9. @sikwe, 13.09.2009 в 20:03

    Автор, спасибо, помогли.

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

    Ответить

  10. Tim, 03.12.2009 в 10:11

    все класс ... автору спасибо ! оч простое и эффективное решение

    Ответить

  11. @ art, 29.12.2009 в 15:56

    piumosso.ru/a/css/forms/compact-cols — тут способ выравнивания полей формы!

    Ответить

  12. Smokey, 21.09.2010 в 16:38

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

    Ответить

  13. Сергей, 19.03.2012 в 10:05

    Спасибо, сработало =)

    ЗЫ: правда гугл хром все равно неровно отображает(

    Ответить

Есть что сказать?