Este artigo demonstra como alinhar verticalmente o texto dentro de um flexbox:
Método 1: Usando a propriedade “align-item”
Para alinhar o texto verticalmente, os usuários podem utilizar o “ item de alinhamento ” propriedade fornecida pelo CSS. Ajuda os elementos a definir seu alinhamento dentro do flexbox. As possíveis posições de alinhamento vertical podem estar no “ principal ”, meio ', ou ' fundo ' lado.
As demonstrações práticas para alinhar elementos nessas direções são apresentadas a seguir:
Exemplo 1: posição superior
Para alinhar o texto dentro do flexbox na posição superior, o “ início flexível ” valor é fornecido para o “ itens de alinhamento ' propriedade. Esta propriedade é atribuída ao div principal que será exibido como flex. Vamos supor, o div com uma classe de “ vertical ” é criado no arquivo HTML. Em seguida, no arquivo CSS, selecione essa classe e atribua as seguintes propriedades:
.vertical {
cor : branco ;
altura : 150px ;
mostrar : flex ;
padding-left : 20px ;
itens de alinhamento : início flexível ;
cor de fundo : verde floresta ;
}
- Primeiro, o estilo básico e o alinhamento são fornecidos ao div usando as propriedades color, background-color e height do CSS.
- A propriedade “display” também é definida como “flex” para torná-lo um flexbox.
- Por fim, para exibir o texto no início do flexbox, defina a propriedade “align-items” como “flex-start.
Depois de executar o código acima, a página da Web ficará assim:
A saída mostra que o texto agora está alinhado na posição superior dentro do flexbox.
Exemplo 2: posição intermediária
Para alinhar verticalmente o texto na posição do meio, defina o “ Centro ” valor para o CSS “ itens de alinhamento ' propriedade:
.vertical {cor : branco ;
altura : 150px ;
mostrar : flex ;
padding-left : 20px ;
itens de alinhamento : Centro ;
cor de fundo : verde floresta ;
}
Após a execução do código acima:
A saída acima mostra que o texto agora está alinhado no centro do flexbox.
Exemplo 3: Posição Inferior
Para definir o texto na parte inferior do flexbox, atribua o “ extremidade flexível ” valor para o “ itens de alinhamento ' propriedade. Desta vez, o texto fica alinhado na posição onde o flexbox está terminando significa na parte inferior:
.vertical {cor : branco ;
altura : 150px ;
mostrar : flex ;
padding-left : 20px ;
itens de alinhamento : extremidade flexível ;
cor de fundo : verde floresta ;
}
Depois de executar o código acima, a página da Web ficará assim:
A saída acima mostra que o texto agora está alinhado verticalmente na posição inferior.
Método 2: usando a propriedade “justify-content”
O ' justificar-conteúdo ” também pode ser utilizada para alinhar verticalmente o texto dentro do flexbox. No entanto, funciona da mesma forma que o “ alinhamento de texto ” e alinha os elementos na direção da linha. Então, para mudar a direção do alinhamento, o “ direção flexível ” propriedade é utilizada para definir o “ justificar-conteúdo ” alinhamento para “ coluna ” Direção:
.vertical {altura : 150px ;
mostrar : flex ;
padding-left : 20px ;
cor : branco ;
cor de fundo : darkcyan ;
direção flexível : coluna ;
justificar-conteúdo : extremidade flexível ;
}
A explicação do código acima é fornecida abaixo:
- O ' altura ”, “ cor ' e ' padding-left ” funcionam exatamente como o método acima.
- Depois disso, defina o “ coluna ” valor para o “ direção flexível ” do flexbox para aplicar estilos por meio de colunas.
- Depois disso, o “ justificar-conteúdo ” alinha o texto verticalmente.
- No final, o “ extremidade flexível ” valor alinha o elemento no “ fundo ' lado.
Observação : Os usuários também podem definir “ início flexível ' e ' Centro ” valores para “ principal ', e ' meio ” lados, respectivamente.
Por exemplo, depois de executar o código acima, a página da Web fica assim:
A saída acima mostra que o texto está alinhado na parte inferior do flexbox.
Conclusão
Para alinhar verticalmente o texto dentro de um flexbox, o “ itens de alinhamento ' e ' justificar-conteúdo ” Propriedades CSS podem ser utilizadas. Ambas as propriedades obtêm “ início flexível ”, “ Centro ' ou ' extremidade flexível ” valores para alinhar o texto em “ principal ”, “ meio ' e ' fundo ” direções dentro do flexbox, respectivamente. Este artigo demonstrou o alinhamento vertical do texto em um flexbox.