vertical align
Вертикальное выравнивание
Применяется только к строчным элементам, ячейкам таблиц и изображениям
Не выравнивает содержимое блочного элемента
1* { box-sizing: border-box; }
img {
margin-right: 0.5em;
}
p {
height: 3em;
padding: 0 .5em;
font-family: Arial;
text-decoration: underline overline;
margin-left: auto;
margin-right: auto;
width: 80%;
}<body>
<p>
top:<img style="vertical-align:top"
src="https://garevna.github.io/a-level-js-lessons/ico/coffee-25.png">
middle:<img style="vertical-align:middle"
src="https://garevna.github.io/a-level-js-lessons/ico/coffee-25.png">
bottom:<img style="vertical-align:bottom"
src="https://garevna.github.io/a-level-js-lessons/ico/coffee-25.png">
super:<img style="vertical-align:super"
src="https://garevna.github.io/a-level-js-lessons/ico/coffee-25.png">
sub:<img style="vertical-align:sub"
src="https://garevna.github.io/a-level-js-lessons/ico/coffee-25.png">
</p>
</body> |
|---|
С этим примером можно поиграть в песочнице
Можно использовать числовые значения, как с абсолютными, так и с относительными единицами измерения
Отрицательные значения будут приводить к сдвигу изображения вверх, положительные - вниз
 |
|---|
С этим примером можно поиграть в песочнице
<table>
<thead>
<tr>
<th width="150" scope="col">top</th>
<th width="170" scope="col">middle</th>
<th width="170" scope="col">bottom</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top">
vertical-align:top
</td>
<td style="vertical-align:middle">
vertical-align:middle
</td>
<td style="vertical-align: bottom;">
vertical-align:bottom
</td>
<td>
If the grid container has a definite or maximal size in the relevant axis,
then the number of repetitions is the largest possible positive integer
that does not cause the grid to overflow its grid container.
Treating each track as its maximal track sizing function, if that is definite.
Otherwise, as its minimum track sizing function, and taking grid-gap into account.
If any number of repetitions would overflow, then the repetition is 1.
Otherwise, if the grid container has a definite minimal size in the relevant axis,
the number of repetitions is the smallest possible positive integer that fulfills
that minimum requirement. Otherwise, the specified track list repeats only once.
</td>
</tr>
</tbody>
</table>
Всемирная паутина
Пример
Flexbox Froggy
