Um texto pode ser facilmente adicionado em qualquer lugar, mas sem alinhamento pode parecer pouco apresentável e menos atraente. O texto desalinhado também pode atrapalhar toda a aparência de uma página da web. Para lidar com essas coisas em aplicativos da Web, podemos usar algumas propriedades úteis do CSS que ajudarão você a alinhar textos rapidamente.
Este artigo irá demonstrar como alinhar texto verticalmente em CSS.
Como alinhar texto verticalmente em CSS?
Em CSS, você pode usar as propriedades abaixo para alinhar o texto verticalmente:
-
- propriedade de altura de linha
- propriedades de exibição e alinhamento de itens
Agora, vamos passar por cada método um por um!
Método 1: usando a propriedade line-height para alinhar o texto verticalmente em CSS
O ' altura da linha ” especifica a área abaixo e os elementos embutidos para cima. Ele define a distância de um texto de outros itens. Usando a propriedade line-height, o texto pode ser facilmente alinhado verticalmente ao meio.
Exemplo
Aqui está um texto dentro de uma caixa (borda) atualmente localizada no canto superior esquerdo. Vamos alinhar este texto ao centro vertical e horizontalmente:
Agora vamos para o próximo método. “ 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 Em primeiro lugar, tornaremos nosso contêiner flexível, definindo o valor do “ exibição ” propriedade como “ flexionar ”. Em seguida, use o “ itens de alinhamento ” para definir o conteúdo no centro verticalmente. Além disso, para alinhar o conteúdo no centro horizontalmente, o “ justificar-conteúdo ” propriedade será usada: Em CSS, o texto pode ser facilmente alinhado verticalmente com a ajuda do “ altura da linha ' propriedade. Você também pode utilizar o “ caixa flexível “ para o alinhamento vertical do texto com “ exibição ' e ' itens de alinhamento ” propriedades. Flexbox é um layout unidimensional e é usado simplesmente para o alinhamento vertical ou horizontal de itens. Esta postagem ofereceu dois métodos mais fáceis que podem ajudá-lo a alinhar o texto verticalmente no CSS.
Para fazer isso, adicione um contêiner “
Melhor site educacional !
div >
A caixa é formada usando um “ 3px “fronteira e” 250px ' altura. O ' tamanho da fonte ” propriedade é usada com o valor “ 24px ” para tornar a fonte visível. Vamos atribuir div um “ altura da linha ' do ' 250px ” para alinhar seu texto verticalmente no meio. Em seguida, usaremos o “ alinhamento de texto ” para alinhar o texto no centro:
altura da linha: 250px;
alinhamento de texto: centro;
tamanho da fonte: 24px;
altura: 250px;
borda: sólido de 3px;
}
Como você pode ver, o texto foi alinhado verticalmente ao centro usando line-height e horizontalmente ao centro com a propriedade text-align. Método 2: usando a propriedade display e align-items para alinhar o texto verticalmente em CSS
exibição: flexionar ;
alinhar-itens: centro;
justificar-conteúdo: centro;
tamanho da fonte: 24px;
altura: 200px;
borda: sólido de 3px;
}
O texto especificado foi alinhado ao centro com sucesso:
Fornecemos métodos relacionados ao alinhamento vertical de texto em CSS. Conclusão