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

Автор: Aport Вторник, Январь 27th, 2015 Нет комментариев

Рубрика: Разное

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

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

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты