--- 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; /* значения длины (<length>) */ vertical-align: 10em; vertical-align: 4px; /* процентные значения (<percentage>) */ 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"><p> top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> super:<img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/> sub:<img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/> </p> <p> text-top:<img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/> text-bottom:<img style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> 0.2em:<img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/> -1em:<img style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/> 20%:<img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/> -100%:<img style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/> </p> </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"><table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> <td style="vertical-align: middle">middle</td> <td style="vertical-align: bottom">bottom</td> <td> <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p> <p>Существует и другая теория, согласно которой это уже случилось.</p></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("<length>")}}</dt> <dd>Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.</dd> <dt>{{cssxref("<percentage>")}}</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><length></code>, и <code><percentage></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"><div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div> <div>Изображение <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по верхнему краю.</div> <div>Изображение <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по нижнему краю.</div> <div>Изображение <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по центру.</div> </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("<length>")}} и позволяет применять его к элементам с типом <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">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/">All You Need To Know About Vertical-Align</a></li> </ul>