Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Еще несколько свойств... Рамка вокруг ссылки

Еще несколько свойств CSS

Caption-side Vertical-align

Заголовок таблицы
Вертикальное выравнивание


И напоследок рассмотрим еще несколько свойств CSS, которые я не отнес ни к одной из пройденных ранее тем.

Заголовок таблицы

Свойство caption-side задает положение заголовка таблицы. Оно применимо к тегу <caption>.

В основном используются два значения свойства caption-side: top и bottom, при которых заголовок располагается над и под таблицей соответственно.

Пример

Фрагмент кода:

<table border="1" width="500px" align="center">
<caption style="caption-side:top;"> Заголовок расположен над таблицей </caption>
<tr>
<td>
Спасибо, что посетили мой сайт! </td>
<td>
Удачи Вам! </td>
</tr>
</table>

<table border="1" width="500px" align="center">
<caption style="caption-side:bottom;">
Заголовок расположен под таблицей </caption>
<tr>
<td>
Я рад! </td>
<td>
Если смог Вам помочь! </td>
</tr>
</table>

Результат:


Заголовок расположен над таблицей
Спасибо, что посетили мой сайт! Удачи Вам!

Заголовок расположен под таблицей
Я рад! Если смог Вам помочь!

Значения left и right свойства caption-side, при которых заголовок располагается соответственно слева и справа от таблицы, поддерживаются только браузером Mozilla Firefox.

Свойство не поддерживается Internet Explorer до версии 8.0.

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

Свойство vertical-align задает вертикальное выравнивание элемента.

При использовании свойства vertical-align для выравнивании элемента относительно текста или относительно родительского элемента, оно может принимать следующие значения baseline, middle, text-top, text-bottom, top и bottom. А также значения super и sub.

Например при значении middle центр элемента по вертикали выравнивается по базовой линии родительского элемента + половина высоты родительского элемента.

Пример

Фрагмент кода:

<p style="font-size: 36px; text-decoration: line-through;">
Текст <img src="img/peng_64.gif" style="vertical-align:middle;">
</p>

Результат:


Текст


Пояснение к примеру: для тега <img> (изображения пингвина) применили свойство vertical-align со значением middle. Родительским элементом является абзац - тег <p>, то есть текст. Центр пингвина выравнивается по центру текста: по базовой линии текста + половина его высоты.

Базовая линия текста - это воображаемая линия, проходящая по нижнему краю символов.

Верхний и нижний индекс

Значения super и sub свойства vertical-align используются для написания верхнего и нижнего индексов. При этом размер шрифта не меняется.

Пример

Фрагмент кода:

<p style="font-size: 36px;">
2 <span style="vertical-align: super;"> 2 </span> =4 и
H <span style="vertical-align: sub;"> 2 </span> O
</p>

Результат:


22=4 и H2O


Числовые значения свойства vertical-align

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

Пример

Фрагмент кода:

<p style="font-size: 22px; color:#0099FF;">
Все
<span style="vertical-align:
5px;"> Выше! </span>
<span style="vertical-align:
10px;"> И Выше! </span>
<span style="vertical-align:
15px;"> И Выше! </span>
</p>

Результат:


Все Выше! И Выше! И Выше!


Вертикальное выравнивание в ячейках таблицы

И, наконец, свойство vertical-align используется для выравнивания элементов по вертикали в ячейках таблицы. При этом оно может принимать следующие значения: baseline, middle, top и bottom.

Подробно с подобным использованием свойства vertical-align Вы можете ознакомиться на странице с его описанием. А сейчас приведем простой пример.

Пример

Фрагмент кода:

<table border="1" width="500px">
<tr style="
font-size:36px; height:100px;">
<td style="
vertical-align:baseline;"> baseline </td>
<td style="
vertical-align:middle;"> middle </td>
</tr>
<tr style="font-size:36px; height:100px;">
<td style="
vertical-align:bottom;"> bottom </td>
<td style="
vertical-align:top;"> top </td>
</tr>
</table>

Результат:


baseline middle
bottom top

Ну вот, на этом шаге, а точнее на этом свойстве, мы и закончим этот небольшой путь в изучении технологии CSS.

Я рад, если этот раздел моего сайта был Вам полезен!

Свойства ячеек Еще несколько свойств... Рамка вокруг ссылки
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru