path: root/files/ru/web/css/vertical-align/index.html

---
title: vertical-align
slug: Web/CSS/vertical-align
translation_of: Web/CSS/vertical-align
---
<div>{{CSSRef}}</div>

<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a>  <code>vertical-align</code> описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).</p>

<pre class="brush: css no-line-numbers notranslate">/* ключевые значения */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* значения длины (&lt;length&gt;) */
vertical-align: 10em;
vertical-align: 4px;

/* процентные значения (&lt;percentage&gt;) */
vertical-align: 20%;

/* глобальные значения */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
</pre>

<p>Свойство <code> vertical-align</code> может использоваться в двух контекстах:</p>

<ul>
 <li>Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать {{HTMLElement("img")}} в строке текста:</li>
</ul>

<div id="vertical-align-inline">
<pre class="hidden brush: html notranslate">&lt;p&gt;
top:&lt;img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
middle:&lt;img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
bottom:&lt;img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
super:&lt;img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
sub:&lt;img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
&lt;/p&gt;
&lt;p&gt;
text-top:&lt;img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
text-bottom:&lt;img  style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
0.2em:&lt;img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-1em:&lt;img  style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
20%:&lt;img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
-100%:&lt;img  style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
&lt;/p&gt;

</pre>

<pre class="hidden brush: css notranslate">#* {
  box-sizing: border-box;
}

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 .5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
</pre>
</div>

<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>

<ul>
 <li>Для вертикального позиционирования содержимого ячейки таблицы:</li>
</ul>

<div id="vertical-align-table">
<pre class="hidden brush: html notranslate">&lt;table&gt;
  &lt;tr&gt;
    &lt;td style="vertical-align: baseline"&gt;baseline&lt;/td&gt;
    &lt;td style="vertical-align: top"&gt;top&lt;/td&gt;
    &lt;td style="vertical-align: middle"&gt;middle&lt;/td&gt;
    &lt;td style="vertical-align: bottom"&gt;bottom&lt;/td&gt;
    &lt;td&gt;
      &lt;p&gt;Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.&lt;/p&gt;
&lt;p&gt;Существует и другая теория, согласно которой это уже случилось.&lt;/p&gt;</pre>

<pre class="hidden brush: css notranslate">table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table, th, td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}
</pre>
</div>

<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>

<div class="note">
<p><strong>Обратите внимание:</strong> свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования <a href="/ru/docs/Web/HTML/Block-level_elements">блочных элементов</a>.</p>
</div>

<p>{{cssinfo}}</p>

<h2 id="Синтаксис">Синтаксис</h2>

<p>Свойство <code>vertical-align</code> задаётся одним из ключевых значений, указанных ниже.</p>

<h3 id="Значения_для_строчных_элементов">Значения для строчных элементов</h3>

<h4 id="Значения_относительно_родительского_элемента">Значения относительно родительского элемента</h4>

<p>Данные значения позиционируют элемент по вертикали относительно родительского элемента:</p>

<dl>
 <dt><code>baseline</code></dt>
 <dd>Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых <a href="/ru/docs/CSS/Replaced_element">замещаемых элементов</a>, таких как {{HTMLElement("textarea")}}, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.</dd>
 <dt><code>sub</code></dt>
 <dd><span id="result_box" lang="ru"><span class="hps">Выравнивает</span> <span class="hps">базовую линию</span> <span class="hps">элемента с</span> <span class="alt-edited hps">базовой линией подстрочного индекса </span><span class="alt-edited hps">своего</span> <span class="hps">родителя.</span></span></dd>
 <dt><code>super</code></dt>
 <dd><span id="result_box" lang="ru"><span class="hps">Выравнивает</span> <span class="hps">базовую линию</span> <span class="hps">элемента с</span> базовой линией <span class="alt-edited hps">надстрочного индекса </span><span class="alt-edited hps">своего</span> <span class="hps">родителя</span></span>.</dd>
 <dt><code>text-top</code></dt>
 <dd>Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.</dd>
 <dt><code>text-bottom</code></dt>
 <dd>Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.</dd>
 <dt><code>middle</code></dt>
 <dd>Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).</dd>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.</dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства {{Cssxref("line-height")}}) над базовой линией родительского элемента. Допустимы отрицательные значения.</dd>
</dl>

<h4 id="Значения_относительно_строки">Значения относительно строки</h4>

<p>Следующие значения позиционируют элемент по вертикали относительно всей строки:</p>

<dl>
 <dt><code>top</code></dt>
 <dd>Выравнивает верхний край элемента и его потомков с верхним краем всей строки.</dd>
 <dt><code>bottom</code></dt>
 <dd>Выравнивает нижний край элемента и его потомков с нижним краем всей строки.</dd>
</dl>

<p>Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа (margin).</p>

<h3 id="Значения_для_ячеек_таблицы">Значения для ячеек таблицы</h3>

<dl>
 <dt><code>baseline</code> (и <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code>, и <code>&lt;percentage&gt;</code>)</dt>
 <dd>Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.</dd>
 <dt><code>top</code></dt>
 <dd>Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.</dd>
 <dt><code>middle</code></dt>
 <dd>Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.</dd>
 <dt><code>bottom</code></dt>
 <dd>Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.</dd>
</dl>

<p>Допустимы отрицательные значения.</p>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

{{csssyntax}}

<h2 id="Пример">Пример</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;div&gt;Изображение &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по умолчанию.&lt;/div&gt;
&lt;div&gt;Изображение &lt;img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по верхнему краю.&lt;/div&gt;
&lt;div&gt;Изображение &lt;img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по нижнему краю.&lt;/div&gt;
&lt;div&gt;Изображение &lt;img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по центру.&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }
</pre>

<h3 id="Результат">Результат</h3>

<p>{{EmbedLiveSample("Пример")}}</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Определяет <code>vertical-align</code> как анимируемый.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Добавляет значение {{cssxref("&lt;length&gt;")}} и позволяет применять его к элементам с типом <code>table-cell</code> – {{cssxref("display")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Изначальное определение.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>



<p>{{Compat("css.properties.vertical-align")}}</p>

<h2 id="See_also" name="See_also">Смотрите также</h2>

<ul>
 <li>{{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}</li>
 <li><a href="http://phrogz.net/css/vertical-align/index.html" title="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></li>
 <li><a href="http://christopheraue.net/2014/03/05/vertical-align/" title="http://christopheraue.net/2014/03/05/vertical-align/">All You Need To Know About Vertical-Align</a></li>
</ul>