Умелое использование background и vertical-align

Вот пример использующий не замену background-а, а лишь изменение его положения:

Если взглянуть на него, то мы увидим вот это:

Но, если подумать, ведь нам незачем рисовать для каждой кнопки свою картинку и можно использовать общую, то нарисуем вот так:

После чего наш пример с текстом(не нарисованным) будет выглядеть так:

В этим 2-х примерах использован лишь CSS, никакого JavaScrpt.

Немного пояснения: для вертикального выравнивания текста в div или table помогает - vertical-align, атрибут управляет расположением текста в текстовой строке, не в объекте, поэтому, в стиле дива вместо height: 40px мы указываем line-height: 40px. Многие путаются и не находят выхода.

А если мы хотим выровнять текст у самого низа дива или таблицы, то здесь нам опять прейдет на помощь line-height, а так же valign="bottom"

p.s. Бывает очень нужно выровнять элемент input в середине строки, так, чтобы он смотрелся как элемент строки а не выше, для этого достаточно придать ему атрибут vertical-align: middle; и он будет выглядить так: а не так:

Весь код в теле страницы!