box-align

Kein Standard: Diese Funktion ist nicht standardisiert und befindet sich nicht im Standardisierungsprozess. Verwenden Sie sie nicht auf Produktionsseiten, die auf das Web ausgerichtet sind: Sie wird nicht für alle Benutzer funktionieren. Außerdem kann es große Inkompatibilitäten zwischen Implementierungen geben und das Verhalten kann sich in Zukunft ändern.

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, kann sie bereits aus den relevanten Webstandards entfernt worden sein, befindet sich im Prozess der Entfernung oder wird nur aus Kompatibilitätsgründen beibehalten. Vermeiden Sie die Verwendung und aktualisieren Sie gegebenenfalls bestehenden Code; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu treffen. Beachten Sie, dass diese Funktion jederzeit nicht mehr funktionieren kann.

Warnung: Dies ist eine Eigenschaft des ursprünglichen Entwurfs des Flexbox-Moduls in CSS und wurde durch einen neueren Standard ersetzt.

Die box-align-Eigenschaft von CSS bestimmt, wie ein Element seinen Inhalt in seiner Layoutstruktur in einer senkrechten Richtung ausrichtet. Der Effekt der Eigenschaft ist nur sichtbar, wenn zusätzlicher Platz im Element vorhanden ist.

Siehe Flexbox für Informationen über den aktuellen Standard.

Die Richtung des Layouts hängt von der Orientierung des Elements ab: horizontal oder vertikal.

Syntax

css

/* Keyword values */
box-align: start;
box-align: center;
box-align: end;
box-align: baseline;
box-align: stretch;

/* Global values */
box-lines: inherit;
box-lines: initial;
box-lines: unset;

Die box-align-Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

start: Das Element richtet den Inhalt am Anfang aus und lässt zusätzlichen Platz am Ende.
center: Das Element richtet den Inhalt in der Mitte aus und teilt den zusätzlichen Platz gleichmäßig zwischen Anfang und Ende.
end: Das Element richtet den Inhalt am Ende aus und lässt zusätzlichen Platz am Anfang.
baseline: Das Element richtet die Baselines des Inhalts aus (Text wird ausgerichtet). Dies gilt nur, wenn die Orientierung des Elements horizontal ist.
stretch: Das Element dehnt den Inhalt so aus, dass kein zusätzlicher Platz im Element vorhanden ist.

Anmerkungen

Die Kante des Elements, die für Ausrichtungszwecke als Anfang festgelegt wird, hängt von der Orientierung des Elements ab:

Bei horizontalen Elementen ist der Anfang die obere Kante.
Bei vertikalen Elementen ist der Anfang die linke Kante.

Die Kante gegenüber dem Anfang wird als Ende bezeichnet.

Wenn die Ausrichtung über das align-Attribut des Elements festgelegt wird, wird der Stil ignoriert.

Formale Definition

Initialer Wert	`stretch`
Anwendbar auf	Elemente mit einem CSS `display` Wert von `box` oder `inline-box`
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

box-align =
  start | center | end | baseline | stretch

Beispiele

Festlegung der Elementausrichtung

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>CSS box-align example</title>
    <style>
      div.example {
        display: box; /* As specified */
        display: -moz-box; /* Mozilla */
        display: -webkit-box; /* WebKit */

        /* Make this box taller than the children,
     so there is room for the box-pack */
        height: 400px;

        /* Make this box wider than the children
     so there is room for the box-align */
        width: 300px;

        /* Children should be oriented vertically */
        box-orient: vertical; /* As specified */
        -moz-box-orient: vertical; /* Mozilla */
        -webkit-box-orient: vertical; /* WebKit */

        /* Align children to the horizontal center of this box */
        box-align: center; /* As specified */
        -moz-box-align: center; /* Mozilla */
        -webkit-box-align: center; /* WebKit */

        /* Pack children to the bottom of this box */
        box-pack: end; /* As specified */
        -moz-box-pack: end; /* Mozilla */
        -webkit-box-pack: end; /* WebKit */
      }

      div.example > p {
        /* Make children narrower than their parent,
     so there is room for the box-align */
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <p>
        I will be second from the bottom of div.example, centered horizontally.
      </p>
      <p>I will be on the bottom of div.example, centered horizontally.</p>
    </div>
  </body>
</html>

align-items, box-orient, box-direction, box-pack