Умелое использование 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

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

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

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