scatola-align CSS3 proprietà
Esempi
L'elemento figlio del div utilizzando sia le proprietà box-pack centrati box-align e:
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;
}
Prova »
In fondo a questa pagina per ulteriori esempi.
Supporto per il browser
Allo stato attuale, tutti i principali browser non supportano proprietà box-align.
Internet Explorer 10 per il sostegno privato di proprietà -ms-flex-align.
Firefox dalla proprietà privata - MOZ-box-align supporto.
Safari e Chrome di supporto proprietà -webkit-box-align privata.
Nota: Internet Explorer 9 e versioni precedenti non scatola di elasticità IE supportano.
Attributo definizioni e le istruzioni
attributo align box box- specifica come elementi figlio sono allineati.
| predefinito: | tratto |
|---|---|
| ereditarietà: | no |
| versione: | CSS3 |
| sintassi JavaScript: | object .style.boxAlign = "center" |
grammatica
box-align: start|end|center|baseline|stretch;
| valore | spiegazione |
|---|---|
| inizio | Per le normali scatole di direzione, il bordo superiore di ogni elemento secondario è posto lungo la parte superiore della scatola. Sulla scatola lungo la parte inferiore del caso inverso, il bordo inferiore di ogni sottoelemento |
| fine | Per le normali scatole di direzione, il bordo superiore di ogni elemento secondario viene posizionato lungo il fondo della scatola. scatola di inversione, in fondo ad ogni sotto-elemento viene posizionato lungo la parte superiore della scatola |
| centro | Qualsiasi spazio aggiuntivo viene diviso equamente, più della metà di elementi secondari sulla parte superiore, il resto dei sottoelementi sull'altra metà |
| basale | Se la scatola-Orient è incorporato monoassiale o trasversale, tutti gli elementi secondari sono posti in loro allineamento della linea di base |
| tratto | Elementi figlio si estendono per riempire il blocco contenente |
Esempi online
Modificare il valore di un allineamento scatola elemento
Questo esempio dimostra come utilizzare JavaScript per modificare il valore di un elemento di casella-allineamento.