vertical-align – свойство задает вертикальное выравнивание текста относительно элемента – родителя , например ячейки таблицы , свойство. имеет следующие значения .
baseline – по базовой линии элемента с базовой линией родительского элемента.
td { font-size: 12pt; color: red; vertical-align: baseline }middle – Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
td { font-size: 12pt; color: red; vertical-align: middle }top – Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
td { font-size: 12pt; color: red; vertical-align: top }bottom – Выравнивает нижний край элемента и его потомков с нижним краем всей строки.
td { font-size: 12pt; color: red; vertical-align: bottom }sub – Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
<p>
H<span style=vertical-align: sub; font-size: 0.7em">2</span>O
</p>super – Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
<p>
m<span style="vertical-align: super; font-size: 0.7em">3</span>
</p>text-top – Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
<p>
<img alt="" src="foto.gif" height="100"
style="border: 1px red solid">
Строка
<span style="vertical-align: text-top; font-size: 0.6em">
text-top</span>text-bottom – Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
<span style="vertical-align: text-bottom; font-size: 0.6em">
text-bottom</span>
<span style="vertical-align: top; font-size: 0.6em">top</span>
<span style="vertical-align: bottom; font-size: 0.6em">
bottom</span>
<span style="vertical-align: middle; font-size: 0.6em">
middle</span>
Строка</p>
<p>Строка
<span style="vertical-align: 20px; font-size: 0.6em">
20px</span>
<span style="vertical-align: -120%; font-size: 0.6em">
-120%</span>
Строка</p>Пример:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Вертикальное выравнивание текста</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
p {
font-size: 25pt;
}
table {
border: black 1px solid;
border-spacing: 0;
border-collapse: collapse;
height:150px;
font-size: 14pt;
}
td {
border: blue 1px solid;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<h1>Вертикальное выравнивание текста</h1>
<table>
<tbody>
<tr>
<td style="vertical-align: baseline">Строка</td>
<td style="vertical-align: middle">Строка</td>
<td style="vertical-align: top">Строка</td>
</tr>
<tr>
<td style="vertical-align:bottom">Строка</td>
<td>H<span style="vertical-align: sub; font-size: 0.7em">2O</td>
<td>m<span style="vertical-align: super; font-size: 0.7em">3</span></td>
</tr>
<tr>
<td>Строка<span style="vertical-align: text-top; font-size: 0.7em">text-top</span></td>
<td>Строка<span style="vertical-align: text-bottom; font-size: 0.7em">text-bottom</span></td>
<td style="vertical-align: top">Строка</td>
</tr>
</tbody>
</table>
<p><span style="vertical-align: text-bottom; font-size: 0.6em">
text-bottom</span>
<span style="vertical-align: top; font-size: 0.6em">top</span>
<span style="vertical-align: bottom; font-size: 0.6em">bottom</span>
<span style="vertical-align: middle; font-size: 0.6em">middle</span>Строка</p>
<p>Строка
<span style="vertical-align: 20px; font-size: 0.6em">
vertical-align: 20px</span>
<span style="vertical-align: -120%; font-size: 0.6em">
vertical-align: -120%</span>
Строка</p>
</body>
</html>Вертикальное выравнивание текста
