CSS3 Box-align Eigenschaft
Beispiele
Das Kind-Element des div beide Box-align und Box-Pack zentriert Eigenschaften mit:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Versuchen »
Im unteren Bereich dieser Seite finden Sie weitere Beispiele.
Browser-Unterstützung
Derzeit sind alle gängigen Browser unterstützen keine Box-align Eigenschaft.
Internet Explorer 10 von Privateigentum -ms-flex-align Unterstützung.
Firefox von Privateigentum - MOZ-box-align Unterstützung.
Safari und Chrome von Privateigentum -webkit-box-align Unterstützung.
Hinweis: Internet Explorer 9 und früheren Versionen nicht IE Elastizität Box unterstützen.
Attributdefinitionen und Anweisungen
Box Box- align Attribut gibt an, wie untergeordnete Elemente ausgerichtet sind.
Standard: | Strecke |
---|---|
Vererbung: | keine |
Version: | CSS3 |
JavaScript-Syntax: | Objekt .style.boxAlign = "center" |
Grammatik
box-align: start|end|center|baseline|stretch;
Wert | Erklärung |
---|---|
Start | Für die normale Richtung Boxen wird der obere Rand jedes Kind-Element entlang der Oberseite der Box platziert. Auf dem Feld entlang der Unterseite des umgekehrten Fall, dem unteren Rand jedes Subelement |
Ende | Für die normale Richtung Boxen wird der obere Rand jedes Kind-Element entlang der Unterseite der Box platziert. Reverse-Box, der Unterseite jedes Unterelement ist entlang der Oberseite der Box platziert |
Zentrum | Jede zusätzliche Raum wird gleichmäßig aufgeteilt, mehr als die Hälfte der untergeordneten Elemente an der Spitze, der Rest der Unterelemente auf der anderen Hälfte |
Grundlinie | Wenn der schachtel Orient uniaxial oder Quer eingebettet ist , all die Teilelemente sind in ihrer Basis Ausrichtung platziert |
Strecke | Untergeordnete Elemente strecken, um den umschließenden Block zu füllen |
Online Beispiele
Ändern Sie den Wert eines Elements Box Ausrichtung
Dieses Beispiel zeigt, wie Sie JavaScript verwenden, um den Wert eines Elements der Box-align zu ändern.