box-align CSS3 propriedade
Exemplos
O elemento filho do div usando tanto a caixa-align e propriedades da caixa-pack centrados:
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;
}
tente »
Na parte inferior desta página para mais exemplos.
Suporte a navegadores
Actualmente, todos os principais navegadores não suportam a propriedade box-align.
Internet Explorer 10 pelo suporte de propriedade -ms-flex-align privado.
Firefox pela propriedade privada - MOZ-box-align apoio.
Safari e Chrome pelo apoio propriedade -webkit-box-align privado.
Nota: Internet Explorer 9 e versões anteriores não caixa de elasticidade IE apoiar.
Atributo definições e instruções
atributo align box caixa- especifica como elementos filhos estão alinhados.
| padrão: | trecho |
|---|---|
| herança: | não |
| versão: | CSS3 |
| sintaxe JavaScript: | objeto .style.boxAlign = "center" |
gramática
box-align: start|end|center|baseline|stretch;
| valor | explicação |
|---|---|
| começo | Para as caixas de sentido normal, a borda superior de cada elemento de criança é colocado ao longo da parte superior da caixa. Na caixa ao longo do fundo do caso inverso, a borda inferior de cada sub-elemento |
| final | Para as caixas de sentido normal, a borda superior de cada elemento de criança é colocado ao longo da parte inferior da caixa. caixa de sentido inverso, a parte inferior de cada sub-elemento é colocado ao longo da parte superior da caixa |
| centro | Qualquer espaço extra é dividido de forma uniforme, mais de metade dos elementos da criança no topo, o resto das sub-elementos na outra metade |
| baseline | Se a caixa de-Orient é incorporado uniaxial ou transversal, todos os sub-elementos são colocados no seu alinhamento da linha de base |
| trecho | Elementos filho esticar para preencher o bloco contendo |
exemplos on-line
Alterar o valor de um alinhamento caixa de elemento
Este exemplo demonstra como usar o JavaScript para alterar o valor de um elemento da caixa-align.