Наша группа в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

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

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


Как видите, по вертикали поле ввода и кнопка на разном уровне.

Код:

<input size="20" maxlength="50" type="text" title="Поиск">
<input type="image" src="/pic/poisk.gif" alt="Поиск">

Для выравнивания поля ввода и кнопки по вертикали зададим CSS-свойство vertical-align:middle:

<input size="20" maxlength="50" type="text" title="Поиск" style="vertical-align:middle;">
<input type="image" src="/pic/poisk.gif" alt="Поиск" style="vertical-align:middle;">

Можно использовать глобальные CSS-селекторы:

<style>
   input { style="vertical-align:middle;"}
</style>
<input size="20" maxlength="50" type="text" title="Поиск">
<input type="image" src="/pic/poisk.gif" alt="Поиск">

Результат:



.