«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS

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

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

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

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

Значение свойства vertical-align

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство vertical-align </title>
</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>

</body>
</html>
Результат
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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).

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

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

Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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>
Результат

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

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

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



Все cвойства CSS

CSS по шагам