Способы вертикального выравнивания по центру в CSS.

Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.

Вертикальное выравнивание строчных элементов.

В CSS есть такое свойство, называется vertical align. И я думаю, вы не первый раз слышите об этом. Простейшее использование выглядит так:

img { vertical-align : middle; }

Обратите внимание, что в этом случае использования, свойство применяется к элементу img. Поскольку изображения являются строчными элементами, то располагаются они в строке, как если бы они были простым текстом. Но что именно значит "располагаются в строке"? Вот именно здесь появляется понятие "вертикальное выравнивание".

Определяем неиспользуемые CSS-селекторы.

В чём, собственно, проблема?

Каждый из нас участвовал в больших web-проектах, в которых было задействовано много людей. В результате, проект содержал множество стилевых файлов. В таких случаях запросто может получиться ситуация, при которой часть селекторов и классов создавалась во время разработки и тестирования, но к основным задачам проекта отношения не имеет. И к окончанию проекта становится непонятно, какие стили нужны, а какие - нет. Что же делать в таком случае?

Вертикальное центрирование текста.

Есть неплохой способ вертикально центрировать текст в блоке <div> с помощью CSS. Необходимо установить высоту строки текста (line-height этого текста) равной высоте блока (его height). Смотрится неплохо, но главным недостатком является то, что текст необходимо обертывать.

Стилизуем список одним пикселем.

Однопиксельный фоновый рисунок может стать очень удобным многоцелевым инструментом. Размножив его в различных направлениях можно получить горизонтальную линию, вертикальную линию, а также фоновую заливку. Например, его можно использовать для оформления иерархического списка, который первоначально выглядит как беспорядочный набор записей.