box-align

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch 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, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Warnung: Dies ist eine Eigenschaft des ursprünglichen Entwurfs des CSS Flexiblen Box Layout Moduls und wurde durch einen neueren Standard ersetzt.

Die box-align CSS Eigenschaft bestimmt, wie ein Element seine Inhalte in einer senkrechten Richtung innerhalb seines Layouts ausrichtet. Die Wirkung der Eigenschaft ist nur sichtbar, wenn im Kasten zusätzlicher Platz vorhanden ist.

Informationen über den aktuellen Standard finden Sie unter flexbox.

Die Richtung des Layouts hängt von der Ausrichtung 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: Der Kasten richtet Inhalte am Anfang aus und lässt zusätzlichen Platz am Ende.
center: Der Kasten richtet Inhalte in der Mitte aus und teilt zusätzlichen Platz gleichmäßig zwischen Anfang und Ende auf.
end: Der Kasten richtet Inhalte am Ende aus und lässt zusätzlichen Platz am Anfang.
baseline: Der Kasten richtet die Baselines der Inhalte aus (Text wird ausgerichtet). Dies gilt nur, wenn die Ausrichtung des Kastens horizontal ist.
stretch: Der Kasten streckt die Inhalte, sodass kein zusätzlicher Platz im Kasten vorhanden ist.

Hinweise

Der Rand des Kastens, der für Ausrichtungszwecke als Anfang bezeichnet wird, hängt von der Ausrichtung des Kastens ab:

Für horizontale Elemente ist der Anfang die obere Kante.
Für vertikale Elemente ist der Anfang die linke Kante.

Der Rand gegenüber dem Anfang wird als Ende bezeichnet.

Wenn die Ausrichtung durch das align Attribut des Elements festgelegt wird, wird der Stil ignoriert.

Formale Definition

Anfangswert	`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

Festlegen der Kasten-Ausrichtung

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