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

Новая статья на сайте, посвященная выравниванию картинок и текста относительно друг друга.
Статья доступна по адресу www.htmlbook.ru/layout/align.shtml

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

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

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

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

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

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

Пример 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>

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

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

(2.7)

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

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

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

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<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>

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

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

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

Как сидеть

	При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора.
Как набирать

	Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами. Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм.

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

Пример 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>

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

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

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

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

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