alignment-baseline

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die alignment-baseline CSS Eigenschaft spezifiziert die spezifische Baseline, die verwendet wird, um den Text des Box-Elements und inline-Level-Inhalte auszurichten. Baseline-Ausrichtung ist die Beziehung zwischen den Baselines mehrerer Ausrichtungsobjekte innerhalb eines Ausrichtungskontextes. Bei der Durchführung der Baseline-Ausrichtung gibt der Wert der Eigenschaft alignment-baseline an, welche Baseline des Box-Elements an die entsprechende Baseline seines Ausrichtungskontextes ausgerichtet wird.

Hinweis: Die alignment-baseline-Eigenschaft hat nur Auswirkungen auf Inline-Level-Boxen, Flex-Elemente, Grid-Elemente, Tabellenzellen und die <text>, <textPath> und <tspan> SVG-Elemente. Falls vorhanden, überschreibt sie das alignment-baseline Attribut der Form.

In einem Inline-Formatierkontext teilen sich Inline-Level-Boxfragmente und Glyphen einen Ausrichtungskontext, der durch ihr übergeordnetes Inline-Boxfragment entlang seiner Inline-Achse etabliert wird. Im SVG-Textlayout geben diese Werte stattdessen die Baseline an, die an der aktuellen SVG-Textposition ausgerichtet wird.

Syntax

css
/* Initial value */
alignment-baseline: baseline;

/* Keyword values */
alignment-baseline: alphabetic;
alignment-baseline: central;
alignment-baseline: ideographic;
alignment-baseline: mathematical;
alignment-baseline: middle;
alignment-baseline: text-bottom;
alignment-baseline: text-top;

/* Mapped values */
alignment-baseline: text-before-edge; /* text-top */
alignment-baseline: text-after-edge; /* text-bottom */

/* Deprecated values  */
alignment-baseline: auto;
alignment-baseline: before-edge;
alignment-baseline: after-edge;
alignment-baseline: hanging;

/* Global values */
alignment-baseline: inherit;
alignment-baseline: initial;
alignment-baseline: revert;
alignment-baseline: revert-layer;
alignment-baseline: unset;

Werte

baseline

Verwenden Sie den Wert von dominant-baseline des übergeordneten Elements.

alphabetic

Wird beim Schreiben in lateinisch, kyrillisch, griechisch und vielen anderen Schriftsystemen verwendet; gleicht die alphabetische Baseline der Box mit der ihres übergeordneten Elements ab, entsprechend dem unteren Rand der meisten, aber nicht aller Zeichen.

central

Gleicht die zentrale Baseline der Box mit der zentralen Baseline ihres übergeordneten Elements ab, entsprechend der ideographischen zentralen Baseline, zur Hälfte zwischen der ideographischen-Unter- und der ideographischen-Über-Baseline.

ideographic

Gleicht die ideographische Unterkante der Zeichenfläche der Box mit der ihres übergeordneten Elements ab, wobei die abgeleitete Baselinetabelle mit der ideographischen Baselinetabelle der Schrift konstruiert wird.

mathematical

Gleicht die mathematische Baseline der Box mit der ihres übergeordneten Elements ab, entsprechend der zentralen Baseline, um die mathematische Zeichen gestaltet sind.

middle

Richtet den vertikalen Mittelpunkt der Box mit der Baseline der übergeordneten Box plus der Hälfte der x-Höhe des übergeordneten Elements aus. Verwendet die x-Mitten-Baselines; außer unter text-orientation: upright; (wo die alphabetischen und x-Höhen-Baselines im Wesentlichen bedeutungslos sind), in welchem Fall stattdessen die central Baseline verwendet wird.

text-bottom

Gleicht den Boden der Box mit dem oberen Rand des Inhaltsbereichs des übergeordneten Elements ab, unter Verwendung des unteren Linienrandes der Inhaltsbox eines Inline-Elements.

text-top

Gleicht den oberen Rand der Box mit dem oberen Rand des Inhaltsbereichs des übergeordneten Elements ab; der obere Linienrand der Inhaltsbox eines Inline-Elements.

Hinweis: In SVG2 wurden auto, before-edge und after-edge veraltet und text-before-edge ist ein Alias für text-top, und text-after-edge ist ein Alias für text-bottom. Diese Schlüsselwörter sollten nicht als Teil der vertical-align Kurzform-Eigenschaft verwendet werden. Browser unterstützen auto als Synonym für baseline und hanging, wobei der Ausrichtungspunkt des auszurichtenden Objekts mit der "hängenden" Baseline des übergeordneten Textelement-Inhalts ausgerichtet wird, aber keiner der beiden ist Teil der Spezifikation.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

alignment-baseline = 
baseline |
text-bottom |
alphabetic |
ideographic |
middle |
central |
mathematical |
text-top

Beispiel

html
<svg viewBox="0 0 450 160" width="700" height="200">
  <text x="50" y="20">alphabetic</text>
  <text x="50" y="60">central</text>
  <text x="50" y="100">hanging</text>
  <text x="50" y="140">ideographic</text>
  <text x="250" y="20">mathematical</text>
  <text x="250" y="60">middle</text>
  <text x="250" y="100">text-bottom</text>
  <text x="250" y="140">text-top</text>
  <path
    d="M   0,20 l 400,0
       m -400,40 l 400,0
       m -400,40 l 400,0
       m -400,40 l 400,0"
    stroke="grey" />
  <text x="0" y="20" fill="red">baseline</text>
  <text x="0" y="60" fill="red">baseline</text>
  <text x="0" y="100" fill="red">baseline</text>
  <text x="0" y="140" fill="red">baseline</text>
</svg>
css
text {
  font-size: 20px;
  alignment-baseline: baseline;
}
text:nth-of-type(1) {
  alignment-baseline: alphabetic;
}
text:nth-of-type(2) {
  alignment-baseline: central;
}
text:nth-of-type(3) {
  alignment-baseline: hanging;
}
text:nth-of-type(4) {
  alignment-baseline: ideographic;
}
text:nth-of-type(5) {
  alignment-baseline: mathematical;
}
text:nth-of-type(6) {
  alignment-baseline: middle;
}
text:nth-of-type(7) {
  alignment-baseline: text-bottom;
}
text:nth-of-type(8) {
  alignment-baseline: text-top;
}

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch