1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
|
---
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">/* ключевые значения */
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>
{{csssyntax}}
<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>
{{Specifications}}
<h2 id="Browser_compatibility">Совместимость с браузерами</h2>
<p>{{Compat("css.properties.vertical-align")}}</p>
<h2 id="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>
|
