Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Параметры вертикального выравнивания

Параметры вертикального выравнивания

Иногда возникает ситуация, когда нужно сместить фрагмент по вертикали относительно текста, который его окружает, т. е. задать вертикальное выравнивание текста.

Атрибут стиля vertical-align как раз задает вертикальное выравнивание текста:

vertical-align: baseline|sub|super|top|text-top|middle|bottom|

text-bottom|<промежуток между базовыми линиями>|inherit

Этот атрибут стиля принимает восемь предопределенных значений:

baseline — задает выравнивание базовой линии фрагмента текста по базовой линии текста родительского элемента (это поведение по умолчанию). Базовой называется воображаемая линия, на которой располагается текст.

— sub — выравнивает базовую линию фрагмента текста по базовой линии нижнего индекса родительского элемента.

— super — выравнивает базовую линию фрагмента текста по базовой линии верхнего индекса родительского элемента.

— top — выравнивает верхний край фрагмента текста по верхнему краю родительского элемента.

— text-top — выравнивает верхний край фрагмента текста по верхнему краю текста родительского элемента.

— middle — выравнивает центр фрагмента текста по центру родительского элемента.

— bottom — выравнивает нижний край фрагмента текста по нижнему краю родительского элемента.

— text-bottom — выравнивает нижний край фрагмента текста по нижнему краю текста родительского элемента.

Кроме того, мы можем указать для данного атрибута стиля абсолютное или относительное значение, задающее, насколько выше или ниже базовой линии текста родительского элемента должна находиться базовая линия фрагмента текста:

STRONG { vertical-align: super; font-size: smaller }

Этот стиль переопределения тега <STRONG> задает для текста расположение, совпадающее с базовой линией верхнего индекса, и уменьшенный размер шрифта. Фактически с помощью этого стиля мы превращаем содержимое тега в верхний индекс

<STRONG>.

Тот же атрибут стиля пригоден для выравнивания графических изображений, являющихся частью абзаца:

<P>Это картинка: <IMG SRC="picture.png">.</P>

Данный HTML-код создает абзац с графическим изображением. Низ этого изображения будет выровнен по нижнему краю текста абзаца. Иными словами, изображение будет как бы возвышаться над текстом.

Скорее всего, для достижения нужного результата придется поэкспериментировать с различными значениями атрибута стиля vertical-align. Очень уж много у него возможных значений, и слишком разный они дают результат в различных случаях. Но ведь Web-дизайнеру не привыкать к экспериментам!..

Оглавление книги