From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/vertical-align/index.html | 243 +++++++++++++++++++++++++++++ 1 file changed, 243 insertions(+) create mode 100644 files/ru/web/css/vertical-align/index.html (limited to 'files/ru/web/css/vertical-align') 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 +--- +
{{CSSRef}}
+ +

Свойство CSS  vertical-align описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).

+ +
/* ключевые значения */
+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;
+
+ +

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

+ + + +
+ + + +
+ +

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

+ + + +
+ + + +
+ +

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

+ +
+

Обратите внимание: свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования блочных элементов.

+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +

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

+ +

Значения для строчных элементов

+ +

Значения относительно родительского элемента

+ +

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

+ +
+
baseline
+
Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов, таких как {{HTMLElement("textarea")}}, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.
+
sub
+
Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
+
super
+
Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
+
text-top
+
Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
+
text-bottom
+
Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
+
middle
+
Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
+
{{cssxref("<length>")}}
+
Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.
+
{{cssxref("<percentage>")}}
+
Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства {{Cssxref("line-height")}}) над базовой линией родительского элемента. Допустимы отрицательные значения.
+
+ +

Значения относительно строки

+ +

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

+ +
+
top
+
Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
+
bottom
+
Выравнивает нижний край элемента и его потомков с нижним краем всей строки.
+
+ +

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

+ +

Значения для ячеек таблицы

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

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

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример

+ +

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

CSS

+ +
img.top { vertical-align: text-top; }
+img.bottom { vertical-align: text-bottom; }
+img.middle { vertical-align: middle; }
+
+ +

Результат

+ +

{{EmbedLiveSample("Пример")}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}{{Spec2('CSS3 Transitions')}}Определяет vertical-align как анимируемый.
{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}{{Spec2('CSS2.1')}}Добавляет значение {{cssxref("<length>")}} и позволяет применять его к элементам с типом table-cell – {{cssxref("display")}}.
{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}{{Spec2('CSS1')}}Изначальное определение.
+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.vertical-align")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf