Alinhar texto verticalmente em CSS

1. Use a propriedade line-height para alinhar texto verticalmente em CSS
2. Use span dentro de um div junto com a propriedade line-height para alinhar texto verticalmente em CSS
3. Use flexbox para alinhar texto verticalmente em CSS

Apresentaremos três métodos de alinhamento vertical de um texto em CSS.

Use a propriedade line-height para alinhar texto verticalmente em CSS

Se tivermos texto de uma linha, podemos usar a propriedade line-height para alinhar o texto verticalmente dentro de um div. A propriedade CSS line-height define a altura de uma caixa de linha. É usado para definir a distância entre as linhas de texto. No entanto, também podemos usá-lo para alinhar nosso texto de uma linha verticalmente. Esta técnica não funcionará se o texto tiver quebras de linha ou tiver mais de uma linha. Podemos dar à line-height qualquer valor de acordo com nossos requisitos sobre onde queremos alinhar o texto verticalmente.

Por exemplo, crie um div e escreva um texto de uma linha dentro dele. Vamos dar ao div o nome de classe center. Escreva um texto de uma linha Vertically aligned dentro do div. Dê ao div uma height de 100px e line-height de 100px para alinhar verticalmente o texto ao centro do div. Por último, dê ao div uma border de 1px sólido preto para ver o alinhamento vertical.

O exemplo abaixo mostra que o texto é alinhado verticalmente ao centro do div contendo height de 100 px e border de 1px solid black usando a propriedade CSS line-height.

Código de exemplo:

<div class="center"> Vertically aligned </div>

.center {
    height : 100px;
    line-height : 100px;
    border : 1px solid black;
}

Use span dentro de um div junto com a propriedade line-height para alinhar texto verticalmente em CSS

Também podemos alinhar vários números de linhas verticalmente usando a propriedade line-height. Podemos colocar uma tag span dentro de uma tag div e colocar várias linhas dentro da tag span. Podemos usar a tag br para quebrar a linha e torná-la um texto de várias linhas. Então, podemos usar a propriedade line-height para div e span. Também usaremos a propriedade CSS display: inline-block para a tag span para agrupar várias linhas de código. Portanto, também temos que usar a propriedade CSS line-height dentro de span para separar o texto de várias linhas um do outro.

Por exemplo, crie um div e, em seguida, um span dentro de div. Escreva várias linhas de texto dentro desse span com a ajuda da tag br. Em CSS, selecione div e dê a height de 100px e defina altura da linha para 100px. Defina a borda div de 1px solid black para ver o alinhamento. Defina a propriedade display da tag span para inline-block para agrupar várias linhas de texto. Atribua line-height a 20px ao span para dar uma lacuna entre várias linhas de texto. Mantenha o vertical-align para middle para colocar verticalmente o texto exatamente no meio.

O exemplo abaixo mostra o alinhamento vertical de várias linhas de texto dentro de um div com a ajuda das propriedades line-height e display: inline-block.

Código de exemplo:

<div> 
    <span>
        Multiple <br> line <br> code
    </span>
</div>

div{
    height : 100px;
    line-height: 100px;
    border : 1px solid black
}
span {
    display : inline-block;
    vertical-align : middle;
    line-height : 20px;
}

Use flexbox para alinhar texto verticalmente em CSS

Também podemos usar flexbox para alinhar um texto dentro de um div vertical ou horizontalmente. Podemos usar flexbox definindo a propriedade display como flex. Depois de definir a propriedade display como flex, podemos usar a propriedade align-items e colocar seu valor como center para alinhar um texto verticalmente dentro de um div. Podemos usar a propriedade justify-content e defini-la como center para centralizar o texto dentro de um div horizontalmente. Flexboxes são muito fáceis de usar e também muito eficazes.

Por exemplo, crie um div e escreva uma ou várias linhas de texto dentro dele. Use a tag br para fazer várias linhas de texto. Dê uma altura de 100px ao div. Defina a borda como 1px solid black para ver o alinhamento. Coloque o valor da propriedade display como flex para usar flexbox. Em seguida, defina os align-items como center para alinhar o texto verticalmente dentro do div para o centro. Também podemos alinhar o texto horizontalmente, colocando o valor de justify-content em center.

Assim, podemos usar flexbox para alinhar o texto horizontalmente e verticalmente em CSS.

Código de exemplo:

<div>
    Align <br> Text to <br> Center
<div>

div {
    height : 100px;
    border : 1px solid black;
    display : flex;
    align-items : center;
    justify-content : center;
}