На этой странице

CSS Вертикальное выравнивание текста

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>
@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>

Открыть пример в новом окне

Вертикальное выравнивание текста

Рекомендуемые материалы:

Спецификации: