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 legt die spezifische Grundlinie fest, die verwendet wird, um den Text und den Inhalt auf Inline-Ebene der Box auszurichten. Grundlinienausrichtung bezieht sich auf die Beziehung zwischen den Grundlinien mehrerer Ausrichtungssubjekte innerhalb eines Ausrichtungskontextes. Bei der Ausführung der Grundlinienausrichtung gibt der Wert der Eigenschaft alignment-baseline an, welche Grundlinie der Box an die entsprechende Grundlinie ihres Ausrichtungskontextes ausgerichtet wird.

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

In einem Inline-Formatierungskontext teilen Inline-Level-Boxfragmente und Glyphen einen Ausrichtungskontext, der von ihrem übergeordneten Inline-Boxfragment entlang seiner Inline-Achse festgelegt wird. In der SVG-Textanordnung geben diese Werte stattdessen die Grundlinie an, die an die aktuelle Textposition des SVG ausgerichtet ist.

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 dominant-baseline des übergeordneten Elements.

alphabetic

Wird beim Schreiben in lateinischen, kyrillischen, griechischen und vielen anderen Schriften verwendet; passt die alphabetische Grundlinie der Box an die des übergeordneten Elements an, entsprechend dem unteren Bereich der meisten, aber nicht aller Zeichen.

central

Passt die zentrale Grundlinie der Box an die zentrale Grundlinie des übergeordneten Elements an, entsprechend der ideografischen Zentralgrundlinie, die sich zwischen den ideografischen Unter- und Obergrundlinien befindet.

ideographic

Passt die untere Seite der ideografischen Zeichenfläche der Box an die des übergeordneten Elements an, wobei die abgeleitete Grundlinientabelle mit der ideografischen Grundlinientabelle der Schriftart erstellt wird.

mathematical

Passt die mathematische Grundlinie der Box an die des übergeordneten Elements an, entsprechend der zentralen Grundlinie, um die mathematische Zeichen erstellt werden.

middle

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

text-bottom

Passt den unteren Bereich der Box an die obere Bereich des Inhaltsbereichs des übergeordneten Elements an, verwendet den unterliegenden Rand der Inline-Inhaltsbox.

text-top

Passt den oberen Bereich der Box an die obere Bereich des Inhaltsbereichs des übergeordneten Elements an; der überliegende Rand der Inline-Inhaltsbox.

Hinweis: In SVG2 wurden auto, before-edge und after-edge abgelehnt 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" Grundlinie des übergeordneten Textelementinhalts ausgerichtet ist, aber beide gehören nicht zur 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