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

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

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Vertical-align Visibility

Свойство vertical-align

Описание

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

Свойство vertical-align применяется при выравнивании элемента относительно родительского элемента, относительно текста или при выравнивании элементов по вертикали в ячейках таблицы.

Это свойство применимо к встроенным элементам и к ячейкам таблицы (теги <th> и <td>).

Не все браузеры корректно отображают применение этого свойства с некоторыми из значений.

Значение

- baseline – выравнивает базовую линию элемента по базовой линии родительского элемента,

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

- text-top - выравнивает верхнюю границу элемента - по верхней части самого высокого элемента строки,

- text-bottom – выравнивает нижнюю границу элемента - по нижней части элемента строки, расположенного ниже всех,

- top – выравнивает верхнюю границу элемента - по верхней границе строки,

- bottom – выравнивает нижнюю границу элемента - по нижней границе строки,

- super – элемент отображается как верхний индекс. Размер шрифта не меняется,

- sub – элемент отображается как нижний индекс. Размер шрифта не меняется,

- целое положительное число в единицах измерения, принятых в CSS (подробнее здесь...). Положительное значение – элемент смещается вверх, отрицательное значение – элемент смещается вниз относительно базовой линии,

- inherit - принимает значение свойства родительского элемента.

Значения, использующиеся для выравнивания элементов по вертикали в ячейках таблицы:

- baseline – базовая линия ячейки выравнивается по базовой линии ряда, в которой она расположена,

- bottom – выравнивание содержимого ячейки по ее нижнему краю,

- middle – выравнивание содержимого ячейки по ее центру,

- top – выравнивание содержимого ячейки по ее верхнему краю,

- inherit - принимает значение свойства родительского элемента.

Значение по умолчанию

- baseline - относительно родительского элемента или текста,

- middle - в ячейках таблиц.


Пример

Пример 1 - Свойство vertical-align

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство vertical-align </title>

<style type="text/css">
p{ font-size:18px; color:#009999;}
img{
border:solid 1px;}
</style>

</head>
<body>

<p style="text-decoration:line-through;"> Расположение по умолчанию - baseline. <img src="../img/peng_32.gif"> </p>

<p style="text-decoration:underline;"> Расположение по умолчанию - baseline. <img src="../img/peng_32.gif"> </p>

<p style="text-decoration:line-through;"> Центр элемента расположен по центру текста - middle. <img src="../img/peng_32.gif" style="vertical-align:middle;"> </p>

<p style="text-decoration:underline;"> Нижняя граница элемента выравнена по нижней границе строки - bottom. <img src="../img/peng_32.gif" style="vertical-align:bottom;"> </p>

<p style="text-decoration:underline;"> Нижняя граница элемента выравнена по нижней части элемента строки, расположенного ниже всех - text-bottom. <img src="../img/peng_32.gif" style="vertical-align:text-bottom;"> </p>

<p> Верхний индекс <span style="vertical-align:super;"> super </span> </p>

<p> Нижний индекс <span style="vertical-align:sub;"> sub </span> </p>

<div style="font-size:48px;color:#6699FF;">Пр<span style="vertical-align:10px; color:#66CCFF;">и</span>ве<span style="vertical-align:-10px; color:#66CCFF;">т</span>!</div>

</body>
</html>

При просмотре в браузере


Пример 2 - Свойство vertical-align применительно к ячейкам таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство vertical-align </title>
</head>
<body>

<table width="700" border="1" height="120px">
<tr>
<td style=
"vertical-align:top;"> Выравнивание по верхнему краю. </td>
<td
> Выравнивание по середине. </td>
<td style=
"vertical-align:bottom;"> Выравнивание по нижнему краю. </td>
<td style=
"vertical-align:baseline;"> Выравнивание по базовой линии. </td>
</tr>
</table>

</body>
</html>

При просмотре в браузере

Выравнивание по верхнему краю. Выравнивание по середине. Выравнивание по нижнему краю. Выравнивание по базовой линии.

Итак, со значениями top, bottom и middle все просто, и Я думаю, что здесь у Вас сложностей не возникнет.

Другое дело - значение baseline. Здесь следует кое-что пояснить.

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

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

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

Если в строке таблицы несколько ячеек, то базовая линия ряда будет общая для всех его ячеек.


Пример 3 - Свойство vertical-align применительно к ячейкам таблицы. Значение Baseline

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство vertical-align </title>

<style type="text/css">
img{border:solid 1px;}
td{
vertical-align:baseline;}
</style>

</head>
<body>

<table border width="700" height="420px">

<tr>
<td>
Значение baseline </td>
<td>
Baseline </td>
<td>
<img src="../img/peng_64.gif"> </td>
<td>
Baseline </td>
<td>
<span style="font-size:35px;"> Значение baseline </span> </td>
<td> <img src="../img/peng_128.gif"> </td>
</tr>

<tr>
<td> Значение baseline </td>
<td> Baseline </td>
<td> <img src="../img/peng_64.gif"> </td>
<td> Baseline </td>
<td>
<span style="font-size:35px;"> Значение baseline </span> </td>
<td>
&nbsp; </td>
</tr>

<tr>
<td> Значение baseline </td>
<td> Baseline </td>
<td> &nbsp; </td>
<td> Baseline </td>
<td>
<span style="font-size:35px;"> Значение....... baseline </span> </td>
<td> &nbsp; </td>
</tr>

</table>


</body>
</html>

При просмотре в браузере

Значение
baseline
Baseline Baseline Значение baseline
Значение
baseline
Baseline Baseline Значение baseline  
Значение
baseline
Baseline   Baseline Значение....... baseline  

В первом случае базовая линия ряда совпадает с базовой линией ячейки с большим пингвином - то есть с базовой линией данного изображения. Кстати, попробуйте добавить к изображению нижний отступ (свойство margin-bottom), и тогда базовая линия опустится вниз на величину этого отступа.

Во втором случае крупный пингвин удален, и базовая линия строки поднялась до базовой линии ячейки с пингвином поменьше.

И в третьем варианте базовая линия ряда совпадает с базовой линией ячейки с крупным текстом, то есть с базовой линией первой строки текста в этой ячейке.


Свойство Unicode-bidi Свойство Vertical-align Свойство Visibility
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

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