линия-выравнивания-основания

Атрибут alignment-baseline определяет, как объект выравнивается относительно своего родителя. Этот свойство указывает, какая опорная линия данного элемента должна выравниваться с соответствующей опорной линией родителя. Например, это позволяет опорным линиям букв в тексте на основе латинской графики оставаться выровненными при изменении размера шрифта. По умолчанию используется опорная линия с тем же именем, что и вычисленное значение свойства alignment-baseline.

Примечание: Как атрибут представления alignment-baseline может использоваться как свойство CSS.

Вы можете использовать этот атрибут со следующими элементами SVG:

Примечания по использованию

Значение	`auto` \| `baseline` \| `before-edge` \| `text-before-edge` \| `middle` \| `central` \| `after-edge` \| `text-after-edge` \| `ideographic` \| `alphabetic` \| `hanging` \| `mathematical` \| `top` \| `center` \| `bottom`
Значение по умолчанию	`auto`
Анимируемо	Да

auto Устаревший: Значение — опорная линия скрипта, к которому относится символ — т. е. используйте опорную линию родителя.
baseline: Использует выбор опорной линии родительского элемента. Сопоставляет соответствующую опорную линию блока с опорной линией родителя.
before-edge Устаревший: Точка выравнивания выравниваемого объекта выравнивается с опорной линией "before-edge" родительского элемента с текстовым содержимым.
text-bottom: Сопоставляет нижнюю часть блока с верхней частью области содержимого родителя.
text-before-edge: Точка выравнивания выравниваемого объекта выравнивается с опорной линией "text-before-edge" родительского элемента с текстовым содержимым.

Примечание: Это ключевое слово может быть сопоставлено с text-top.
middle: Выравнивает вертикальную середину блока с опорной линией родительского блока плюс половину высоты x-высоты родителя.
central: Сопоставляет центральную опорную линию блока с центральной опорной линией родителя.
after-edge Устаревший: Точка выравнивания выравниваемого объекта выравнивается с опорной линией "after-edge" родительского элемента с текстовым содержимым.
text-top: Сопоставляет верхнюю часть блока с верхней частью области содержимого родителя.
text-after-edge: Точка выравнивания выравниваемого объекта выравнивается с опорной линией "text-after-edge" родительского элемента с текстовым содержимым.

Примечание: Это ключевое слово может быть сопоставлено с text-bottom.
ideographic: Сопоставляет опорную линию нижней части граней идеографического символа блока с опорной линией родителя.
alphabetic: Сопоставляет опорную линию букв блока с опорной линией родителя.
hanging: Точка выравнивания выравниваемого объекта выравнивается с опорной линией "hanging" родительского элемента с текстовым содержимым.
mathematical: Сопоставляет опорную линию математического символа блока с опорной линией родителя.
top: Выравнивает верхнюю часть выравниваемого поддерева с верхней частью блока строки.
center: Выравнивает центр выравниваемого поддерева с центром блока строки.
bottom: Выравнивает нижнюю часть выравниваемого поддерева с нижней частью блока строки.

SVG 2 вносит некоторые изменения в определение этого свойства. В частности: значения auto, before-edge, и after-edge были удалены. Для обратной совместимости text-before-edge может быть сопоставлен с text-top, а text-after-edge — с text-bottom. Ни text-before-edge ни text-after-edge не следует использовать со свойством vertical-align.

Пример

html

<svg
  width="300"
  height="120"
  viewBox="0 0 300 120"
  xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
    d="M60,10 L60,110
              M30,10 L300,10
              M30,65 L300,65
              M30,110 L300,110
              "
    stroke="grey" />

  <!-- Anchors in action -->
  <text alignment-baseline="hanging" x="60" y="10">A hanging</text>

  <text alignment-baseline="middle" x="60" y="65">A middle</text>

  <text alignment-baseline="baseline" x="60" y="110">A baseline</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="10" r="3" fill="red" />
  <circle cx="60" cy="65" r="3" fill="red" />
  <circle cx="60" cy="110" r="3" fill="red" />

  <style><![CDATA[
      text{
        font: bold 36px Verdana, Helvetica, Arial, sans-serif;
      }
    ]]></style>
</svg>

Для выравнивания объектов в других элементах (таких как <text>), см. dominant-baseline.

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

Спецификация
CSS Inline Layout Module Level 3 # alignment-baseline-property
Scalable Vector Graphics (SVG) 2 # AlignmentBaselineProperty

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`alignment-baseline`	≤80	≤80	Нет	67	≤13.1	80	Нет	57	≤13.4	13.0	80

См. также

Выравнивание CSS по опорным линиям

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline