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

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

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

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

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

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

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

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

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

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

line-height нам поможет!
line-height установлен 10px!

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

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

Оцени публикацию:
  • 2,8
Оценили человек: 2

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Для блоков <div> лучше display:table-cell; вместе c vertical-align:middle
    01 октября 2008, 14: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, 15:45 коммент полезен : 0 # Гость
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » CSS »