Exemplo
Centralizar os alinhamentos para todos os itens da flexível <div> elemento:
div
{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
Tente você mesmo " Definição e Uso
Alinhar-itens propriedade especifica o alinhamento padrão para itens dentro do recipiente flexível.
Tip: Use a propriedade align-self de cada item para substituir a propriedade align-itens.
| Valor padrão: | stretch |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.alignItems="center" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguidos de -webkit- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| align-items | 21,0 | 11.0 | 20,0 | 9 7.0 -webkit- | 12.1 |
CSS Syntax
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| stretch | Padrão. Os itens são esticado para caber o recipiente | Jogue " |
| center | Os produtos são posicionadas no centro do recipiente | Jogue " |
| flex-start | Os produtos são posicionados no início do recipiente | Jogue " |
| flex-end | Os produtos são posicionados na extremidade do recipiente | Jogue " |
| baseline | Os produtos são posicionados na linha de base do recipiente | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
CSS Referência: align-content property
CSS Referência: align-self property
HTML DOM de referência: alignItems property