diff options
Diffstat (limited to 'files/ru/web/css/vertical-align/index.html')
| -rw-r--r-- | files/ru/web/css/vertical-align/index.html | 243 |
1 files changed, 243 insertions, 0 deletions
diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html new file mode 100644 index 0000000000..c7e311b39a --- /dev/null +++ b/files/ru/web/css/vertical-align/index.html @@ -0,0 +1,243 @@ +--- +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) или ячеек таблицы (table-cell).</p> + +<pre class="brush: css no-line-numbers">/* ключевые значения */ +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"><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">#* { + 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"><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">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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Пример">Пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><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">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" 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> |