Como alinhar o texto verticalmente no CSS

Um texto pode ser facilmente adicionado em qualquer lugar, mas sem alinhamento, pode parecer pouco apresentável e menos atraente. O texto não alinhado também pode perturbar toda a aparência de uma página da web. Para enfrentar essas coisas nos aplicativos da web, podemos usar algumas propriedades úteis de CSS que o ajudarão a alinhar textos em nenhum momento.

Este artigo demonstrará como alinhar o texto verticalmente no CSS.

Como alinhar o texto verticalmente no CSS?

No CSS, você pode usar as propriedades abaixo para alinhar o texto verticalmente:

• • propriedade de altura de linha
  • exibir e alinhar propriedades

Agora, vamos passar por cada método um por um!

Método 1: Usando a propriedade de altura de linha para alinhar o texto verticalmente no CSS

O "altura da linha”Propriedade especifica a área abaixo e os elementos embutidos para cima. Ele define a distância de um texto de outros itens. Usando a propriedade de altura de linha, o texto pode ser facilmente alinhado verticalmente ao meio.

Exemplo

Aqui está um texto dentro de uma caixa (borda) atualmente localizada no lado superior esquerdo. Vamos alinhar este texto ao centro vertical e horizontalmente:

Para fazer isso, adicione um contêiner “”Dentro da etiqueta do arquivo html e especifique o texto necessário nele:

Melhor site educacional!

A caixa é formada usando um “3px“Border e“250px" altura. O "tamanho da fonte”A propriedade é usada com o valor“24px”Para tornar a fonte visível. Vamos atribuir a div um “altura da linha" de "250px”Para alinhar seu texto verticalmente no meio. Em seguida, usaremos o “alinhamento de texto”Propriedade para alinhar o texto no centro:

div
altura de linha: 250px;
Alinhamento de texto: centro;
Size da fonte: 24px;
Altura: 250px;
borda: 3px sólido;

Como você pode ver, o texto foi alinhado verticalmente ao centro, usando altura de linha e horizontalmente ao centro com a propriedade Text-Align.

Agora vamos nos seguir em direção ao próximo método.

Método 2: Usando a propriedade Display e Align-Items para alinhar o texto verticalmente em CSS

““Flexbox”É um layout unidimensional que permite formatar HTML. Você também pode utilizá -lo para alinhar itens verticalmente ou horizontalmente.

Então, vamos dar um exemplo e alinhar um texto verticalmente com a ajuda do Flexbox.

Exemplo

Primeiro de tudo, tornaremos nosso contêiner flexível, definindo o valor do “mostrar"Propriedade como"flex”. Em seguida, use o “alinhado-itens”Propriedade para definir o conteúdo no centro verticalmente. Além disso, para alinhar o conteúdo no centro horizontalmente, o “Justify-Content”Propriedade será usada:

div
exibição: flex;
alinhado-itens: centro;
Justify-Content: Center;
Size da fonte: 24px;
Altura: 200px;
borda: 3px sólido;

O texto especificado foi alinhado ao centro com sucesso:

Fornecemos métodos relacionados ao alinhamento de texto verticalmente no CSS.

Conclusão

No CSS, o texto pode ser facilmente alinhado verticalmente com a ajuda do “altura da linha" propriedade. Você também pode utilizar o “Flexbox“Para o alinhamento vertical do texto com“mostrar" e "alinhado-itens”Propriedades. O Flexbox é um layout unidimensional e é simplesmente usado para o alinhamento vertical ou horizontal dos itens. Este post ofereceu dois métodos mais fáceis que podem ajudá -lo a alinhar o texto verticalmente no CSS.