Умелое использование 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; и он будет выглядить так: а не так:

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

• Для блоков <div> лучше display:table-cell; вместе c vertical-align:middle

  01 октября 2008, 18:32 коммент полезен : 0 # Гость

• для совместимости не лучше, ни одна версия IE (8 тоже) не знает про значения "inherit", "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" у параметра display

  18 сентября 2009, 19:45 коммент полезен : 0 # Гость