alignment-baseline

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Das alignment-baseline-Attribut bestimmt, wie ein Objekt im Verhältnis zu seinem Elternteil ausgerichtet wird. Diese Eigenschaft legt fest, welche Grundlinie dieses Elements mit der entsprechenden Grundlinie des Elternteils ausgerichtet werden soll. Dies ermöglicht es beispielsweise alphabetischen Grundlinien im römischen Text, bei Größenänderungen der Schriftart ausgerichtet zu bleiben. Standardmäßig wird die Grundlinie mit dem gleichen Namen wie der berechnete Wert der alignment-baseline-Eigenschaft verwendet.

Hinweis: Als Präsentationsattribut hat alignment-baseline auch ein entsprechendes CSS-Eigenschaftsgegenstück: alignment-baseline. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Nutzungshinweise

Wert	`auto` \| `baseline` \| `before-edge` \| `text-before-edge` \| `middle` \| `central` \| `after-edge` \| `text-after-edge` \| `ideographic` \| `alphabetic` \| `hanging` \| `mathematical` \| `top` \| `center` \| `bottom`
Standardwert	`auto`
Animierbar	Ja

auto: Der Wert ist die Dominant-Baseline des Skripts, zu dem das Zeichen gehört - d.h. verwenden Sie die Dominant-Baseline des Elternteils.
baseline: Verwendet die dominant-baseline-Auswahl des Elternteils. Passt die entsprechende Grundlinie der Box an die des Elternteils an.
before-edge: Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "before-edge"-Grundlinie des übergeordneten Textelementes ausgerichtet.
text-bottom: Passt den Boden der Box an die Oberkante des Inhaltsbereichs des Elternteils an.
text-before-edge: Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "text-before-edge"-Grundlinie des übergeordneten Textelementes ausgerichtet.

Hinweis: Dieses Schlüsselwort kann zu text-top zugeordnet werden.
middle: Richtet den vertikalen Mittelpunkt der Box an der Grundlinie der Elternbox plus die halbe x-Höhe des Elternteils aus.
central: Passt die zentrale Grundlinie der Box an die zentrale Grundlinie ihres Elternteils an.
after-edge: Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "after-edge"-Grundlinie des übergeordneten Textelementes ausgerichtet.
text-top: Passt die Oberkante der Box an die Oberkante des Inhaltsbereichs des Elternteils an.
text-after-edge: Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "text-after-edge"-Grundlinie des übergeordneten Textelementes ausgerichtet.

Hinweis: Dieses Schlüsselwort kann zu text-bottom zugeordnet werden.
ideographic: Passt die ideografische Zeichenunter-Seiten-Grundlinie der Box an die ihres Elternteils an.
alphabetic: Passt die alphabetische Grundlinie der Box an die ihres Elternteils an.
hanging: Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "hanging"-Grundlinie des übergeordneten Textelementes ausgerichtet.
mathematical: Passt die mathematische Grundlinie der Box an die ihres Elternteils an.
top: Richtet die Oberseite des ausgerichteten Unterbaums mit der Oberseite der Linienbox aus.
center: Richtet das Zentrum des ausgerichteten Unterbaums mit dem Zentrum der Linienbox aus.
bottom: Richtet den unteren Rand des ausgerichteten Unterbaums an der Unterseite der Linienbox aus.

SVG 2 führt einige Änderungen in der Definition dieser Eigenschaft ein. Insbesondere: die Werte auto, before-edge und after-edge wurden entfernt. Für die Abwärtskompatibilität kann text-before-edge zu text-top und text-after-edge zu text-bottom zugeordnet werden. Weder text-before-edge noch text-after-edge sollte mit der vertical-align-Eigenschaft verwendet werden.

Beispiel

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>

Weitere Informationen zur Objektausrichtung in anderen Elementen (wie <text>) finden Sie unter dominant-baseline.

Spezifikationen

Spezifikation
CSS Inline Layout Module Level 3 # alignment-baseline-property
Scalable Vector Graphics (SVG) 2 # AlignmentBaselineProperty

Browser-Kompatibilität

Siehe auch

CSS alignment-baseline Eigenschaft
CSS-Grundlinienausrichtung

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden