Добавить в избранное  ||  Центрирование по вертикали  ||  Начало  ||  Вертикальные линии

6. Выравнивание элементов

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

Выравнивание по горизонтали

Задача следующая, нужно выравнить два изображения, находящихся на одной горизонтальной линии один по левому, а другой по правому краю. Чем и хороши рисунки, что у них есть параметр align, который выравнивает изображение по тому краю, которому надо. Одновременно задавая у двух рисунков отбивку по левому и правому краю, получим нужный результат (Пример 6.1).

Пример 6.1. Выравнивание двух рисунков по сторонам

<img src="sample1.gif" width="50" height="50" align="left">
<img src="sample2.gif" width="50" height="50" align="right">

Однако, этот способ не лишен недостатков. Во-первых, чтобы добавить после рисунков текст, придется вставлять переносы строк. И во-вторых, выравнивание по вертикали всегда происходит только по верхнему краю. Более широкие возможности предоставляют в этом смысле таблицы, позволяя устанавливать изображения относительно друг друга в любом порядке.

Пример 6.2. Использование таблицы для выравнивания

<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td valign="bottom"><img src="sample1.gif" width="50" height="50">
</td>
<td align="right" valign="bottom"><img src="sample2.gif" width="50"
height="86"></td>
</tr>
</table>

Рис. 6.1. Выравнивание элементов с помощью таблицы

Положение по вертикали изменяется параметром valign тега TD. Благодаря ему, объекты можно выравнивать по верхнему, нижнему краю либо по центральной оси. Атрибут align="left" писать необязательно, он задается по умолчанию. Рамка таблицы, естественно, делается невидимой толщиной ноль пикселов.

Требуется выровнять один объект по центру веб-страницы и одновременно другой по левому (или правому) краю. Такое размещение часто используется при публикации формул с нумерацией (рис. 6.2).

Рис. 6.2. Выравнивание формулы и ее номера

Для такого размещения элементов, требуется создать таблицу с тремя ячейками. Крайние из них должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой, понятное дело, по правому краю (пример. 6.3).

Пример 6.3. Выравнивание по центру и краю

<tr>
<td width="10%"> </td>
<td align="center"><img src="formula.gif" width="289"
height="158"></td>
<td align=right width="10%">(2.7)</td>
</tr>
</table>

Точно также при необходимости помещается текст и в левую ячейку.

Выравнивание по вертикали

И на этот раз таблицы приходят нам на помощь, создавая невидимую модульную сетку, в ячейках которой можно размещать любые элементы. Располагать, причем, можно по разному, например, как показано ниже. В данном случае, заголовки располагаются на одном уровне, а текст на другом, как показано на рис. 6.3.

Рис 6.3. Выравнивание элементов по вертикали

Код для данного примера приведен ниже.

Пример 6.4. Выравнивание по вертикали

<table width="100%" cellspacing="0" cellpadding="0">
<tr><td colspan="2"><b>Как сидеть</b></td></tr>
<tr bgcolor="#000000">
<td colspan="2"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="20%"> </td>
<td><i>При работе на вычислительной технике необходимо сесть
так, чтобы руки с предплечьями образовывали прямой угол,
глаза поставить на расстояние 30-40 см от рабочей поверхности
монитора.<br></i></td>
</tr>
<tr><td colspan="2"><b>Как набирать</b></td></tr>
<tr bgcolor="#000000">
<td colspan="2"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="20%"> </td>
<td><i>Набирать на клавиатуре следует подушечками пальцев
короткими отрывистыми ударами. Предельно допустимая длина
ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм.</i></td>
</tr>
</table>

Точно также можно размещать не только текст, но и рисунки и другие объекты

Добавить в избранное  ||  Центрирование по вертикали  ||  Начало  ||  Вертикальные линии

top