[ru]: update docs/Web/CSS/vertical-align translation (mdn#12578)

leon-win · Nov 12, 2023 · 405e9ac · 405e9ac
1 parent ee69d21
commit 405e9ac
Showing 1 changed file with 136 additions and 113 deletions.
diff --git a/files/ru/web/css/vertical-align/index.md b/files/ru/web/css/vertical-align/index.md
@@ -5,10 +5,21 @@ slug: Web/CSS/vertical-align
 
 {{CSSRef}}
 
-Свойство [CSS](/ru/docs/Web/CSS) `vertical-align` описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).
+[CSS](/ru/docs/Web/CSS)-свойство `vertical-align` устанавливает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).
+
+{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
+
+Свойство `vertical-align` может использоваться в двух контекстах:
+
+- Для вертикального позиционирования области строчного элемента внутри содержащей его строки. Например, с помощью него можно задать [вертикальное позиционирование изображения в строке текста](#вертикальное_позиционирование_строчного_элемента).
+- Для вертикального позиционирования [содержимого ячейки таблицы](#вертикальное_позиционирование_содержимого_ячейки_таблицы).
+
+Следует иметь в виду, что свойство `vertical-align` применяется только к строчным и строчно-блочных элементам, а также к элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования [блочных элементов](/ru/docs/Glossary/Block-level_content).
+
+## Синтаксис
 
 ```css
-/* ключевые значения */
+/* Значения ключевых слов */
 vertical-align: baseline;
 vertical-align: sub;
 vertical-align: super;
@@ -18,113 +29,22 @@ vertical-align: middle;
 vertical-align: top;
 vertical-align: bottom;
 
-/* значения длины (<length>) */
+/* Значения длины (<length>) */
 vertical-align: 10em;
 vertical-align: 4px;
 
-/* процентные значения (<percentage>) */
+/* Процентные значения (<percentage>) */
 vertical-align: 20%;
 
-/* глобальные значения */
+/* Глобальные значения */
 vertical-align: inherit;
 vertical-align: initial;
+vertical-align: revert;
+vertical-align: revert-layer;
 vertical-align: unset;
 ```
 
-Свойство `vertical-align` может использоваться в двух контекстах:
-
-- Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать {{HTMLElement("img")}} в строке текста:
-
-```html hidden
-<p>
-  top: <img style="vertical-align: top" src="star.png" /><br />
-  middle: <img style="vertical-align: middle" src="star.png" /><br />
-  bottom: <img style="vertical-align: bottom" src="star.png" /><br />
-  super: <img style="vertical-align: super" src="star.png" /><br />
-  sub: <img style="vertical-align: sub" src="star.png" /><br />
-</p>
-<p>
-  text-top: <img style="vertical-align: text-top" src="star.png" /><br />
-  text-bottom: <img style="vertical-align: text-bottom" src="star.png" /><br />
-  0.2em: <img style="vertical-align: 0.2em" src="star.png" /><br />
-  -1em: <img style="vertical-align: -1em" src="star.png" /><br />
-  20%: <img style="vertical-align: 20%" src="star.png" /><br />
-  -100%: <img style="vertical-align: -100%" src="star.png" /><br />
-</p>
-```
-
-```css hidden
-#* {
-  box-sizing: border-box;
-}
-
-img {
-  margin-right: 0.5em;
-}
-
-p {
-  height: 3em;
-  padding: 0 0.5em;
-  font-family: monospace;
-  text-decoration: underline overline;
-  margin-left: auto;
-  margin-right: auto;
-  width: 80%;
-}
-```
-
-{{EmbedLiveSample("vertical-align-inline", 1200, 160)}}
-
-- Для вертикального позиционирования содержимого ячейки таблицы:
-
-```html hidden
-<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>
-    </td>
-  </tr>
-</table>
-```
-
-```css hidden
-table {
-  margin-left: auto;
-  margin-right: auto;
-  width: 80%;
-}
-
-table,
-th,
-td {
-  border: 1px solid black;
-}
-
-td {
-  padding: 0.5em;
-  font-family: monospace;
-}
-```
-
-{{EmbedLiveSample("vertical-align-table", 1200, 230)}}
-
-> **Примечание:** свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования [блочных элементов](/ru/docs/Web/HTML/Block-level_elements).
-
-{{cssinfo}}
-
-## Синтаксис
-
-Свойство `vertical-align` задаётся одним из ключевых значений, указанных ниже.
+Свойство `vertical-align` задаётся одним из значений, указанных ниже.
 
 ### Значения для строчных элементов
 
@@ -133,7 +53,7 @@ td {
 Данные значения позиционируют элемент по вертикали относительно родительского элемента:
 
 - `baseline`
-  - : Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых [замещаемых элементов](/ru/docs/CSS/Replaced_element), таких как {{HTMLElement("textarea")}}, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.
+  - : Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых [замещаемых элементов](/ru/docs/Web/CSS/Replaced_element), таких как {{HTMLElement("textarea")}}, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.
 - `sub`
   - : Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
 - `super`
@@ -145,9 +65,9 @@ td {
 - `middle`
   - : Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
 - {{cssxref("&lt;length&gt;")}}
-  - : Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.
+  - : Выравнивает базовую линию элемента относительно базовой линии родительского элемента со смещением на указанную величину. Допустимы отрицательные значения.
 - {{cssxref("&lt;percentage&gt;")}}
-  - : Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства {{Cssxref("line-height")}}) над базовой линией родительского элемента. Допустимы отрицательные значения.
+  - : Выравнивает базовую линию элемента относительно базовой линии родительского элемента со смещением на указанную в процентах величину (вычисляется относительно значения свойства {{Cssxref("line-height")}}). Допустимы отрицательные значения.
 
 #### Значения относительно строки
 
@@ -158,28 +78,34 @@ td {
 - `bottom`
   - : Выравнивает нижний край элемента и его потомков с нижним краем всей строки.
 
-Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа (margin).
+Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница {{Cssxref("margin", "внешнего отступа")}}.
 
 ### Значения для ячеек таблицы
 
 - `baseline` (и `sub`, `super`, `text-top`, `text-bottom`, `<length>`, и `<percentage>`)
-  - : Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
+  - : Выравнивают базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
 - `top`
-  - : Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.
+  - : Выравнивает верхнюю границу {{Cssxref("padding", "внутреннего отступа")}} ячейки с верхним краем строки таблицы.
 - `middle`
-  - : Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.
+  - : Выравнивает внутреннее поля ячейки по центру относительно строки таблицы.
 - `bottom`
-  - : Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.
+  - : Выравнивает нижнюю границу {{Cssxref("padding", "внутреннего отступа")}} ячейки с нижним краем строки таблицы.
 
 Допустимы отрицательные значения.
 
+## Формальное определение
+
+{{cssinfo}}
+
 ### Формальный синтаксис
 
 {{csssyntax}}
 
-## Пример
+## Примеры
+
+### Основной пример
 
-### HTML
+#### HTML
 
 ```html
 <div>
@@ -203,7 +129,7 @@ td {
 </div>
 ```
 
-### CSS
+#### CSS
 
 ```css
 img.top {
@@ -217,9 +143,105 @@ img.middle {
 }
 ```
 
-### Результат
+#### Результат
+
+{{EmbedLiveSample("Основной_пример")}}
+
+### Вертикальное позиционирование строчного элемента
+
+#### HTML
+
+```html-nolint
+<p>
+top:         <img style="vertical-align: top" src="star.png" alt="star"/>
+middle:      <img style="vertical-align: middle" src="star.png" alt="star"/>
+bottom:      <img style="vertical-align: bottom" src="star.png" alt="star"/>
+super:       <img style="vertical-align: super" src="star.png" alt="star"/>
+sub:         <img style="vertical-align: sub" src="star.png" alt="star"/>
+</p>
+
+<p>
+text-top:    <img style="vertical-align: text-top" src="star.png" alt="star"/>
+text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
+0.2em:       <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
+-1em:        <img style="vertical-align: -1em" src="star.png" alt="star"/>
+20%:         <img style="vertical-align: 20%" src="star.png" alt="star"/>
+-100%:       <img style="vertical-align: -100%" src="star.png" alt="star"/>
+</p>
+```
+
+```css hidden
+#* {
+  box-sizing: border-box;
+}
+
+img {
+  margin-right: 0.5em;
+}
+
+p {
+  height: 3em;
+  padding: 0 0.5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("Вертикальное_позиционирование_строчного_элемента", "100%", 160)}}
+
+### Вертикальное позиционирование содержимого ячейки таблицы
+
+#### HTML
+
+```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>
+    </td>
+  </tr>
+</table>
+```
+
+#### CSS
+
+```css
+table {
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+
+table,
+th,
+td {
+  border: 1px solid black;
+}
+
+td {
+  padding: 0.5em;
+  font-family: monospace;
+}
+```
+
+#### Результат
 
-{{EmbedLiveSample("Пример")}}
+{{EmbedLiveSample("Вертикальное_позиционирование_содержимого_ячейки_таблицы", "100%", 230)}}
 
 ## Спецификации
 
@@ -231,6 +253,7 @@ img.middle {
 
 ## Смотрите также
 
+- [Typical use cases of Flexbox, section "Center item"](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox#center_item)
 - {{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}
 - [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](http://phrogz.net/css/vertical-align/index.html)
-- [All You Need To Know About Vertical-Align](http://christopheraue.net/2014/03/05/vertical-align/)
+- [Vertical-Align: All You Need To Know (CSS)](http://christopheraue.net/2014/03/05/vertical-align/)