Свойство 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 - в ячейках таблиц.
<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>
<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).
Базовая линия ячейки таблицы совпадает с базовой линией первой строки текста или первого блока, расположенного в ячейке (смотря, что стоит в начале). Либо это низ ячейки, если в ней отсутствует содержимое.
Если в строке таблицы несколько ячеек, то базовая линия ряда будет общая для всех его ячеек.
<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> </td>
</tr>
<tr>
<td> Значение baseline </td>
<td> Baseline </td>
<td> </td>
<td> Baseline </td>
<td> <span style="font-size:35px;"> Значение....... baseline </span> </td>
<td> </td>
</tr>
</table>
</body>
</html>
В первом случае базовая линия ряда совпадает с базовой линией ячейки с большим пингвином - то есть с базовой линией данного изображения. Кстати, попробуйте добавить к изображению нижний отступ (свойство margin-bottom), и тогда базовая линия опустится вниз на величину этого отступа.
Во втором случае крупный пингвин удален, и базовая линия строки поднялась до базовой линии ячейки с пингвином поменьше.
И в третьем варианте базовая линия ряда совпадает с базовой линией ячейки с крупным текстом, то есть с базовой линией первой строки текста в этой ячейке.
