Como posicionar elementos da web com alinhamento vertical CSS

Alinhar verticalmente elementos em uma página da web nem sempre foi fácil. Ainda não é simples, mas a propriedade CSS de alinhamento vertical pode ajudar.

CSS fornece várias propriedades de alinhamento. A propriedade text-align, limitada a elementos de bloco e células de tabela, descreve o alinhamento horizontal. Por outro lado, a propriedade vertical-align se aplica apenas a elementos embutidos e células de tabela.

Você pode usar muitos valores diferentes para controlar o alinhamento vertical. Alguns são relativos ao elemento pai, outros a elementos exibidos na mesma linha horizontal. Descubra exatamente como você pode usar o alinhamento vertical em diversas situações, para obter um posicionamento preciso.

Os diferentes valores de alinhamento vertical

A propriedade vertical-align assume três tipos distintos de valor: palavras-chave, porcentagens e comprimentos. Cada valor representa uma posição vertical em uma linha ou relativa ao elemento pai (contêiner) do elemento de destino.

Os principais valores de alinhamento vertical são:

linha de base: posiciona o elemento de destino dentro da linha de base do elemento pai.
topo: posiciona o topo do elemento alvo com o topo do elemento mais alto na linha atual.
meio: centraliza o elemento de destino em sua linha atual.
inferior: posiciona a parte inferior do elemento alvo com a parte inferior do elemento mais baixo na linha atual.
sub: posiciona o elemento de destino com a linha de base subscrita do elemento pai.
super: posiciona o elemento alvo na linha de base sobrescrita do elemento pai.
text-top: posiciona o elemento alvo no topo da fonte do elemento pai.
text-bottom: posiciona o elemento alvo com a parte inferior da fonte do elemento pai.
porcentagem (por exemplo, 20%): posiciona a linha de base do elemento alvo em um ponto acima, abaixo ou na linha de base do elemento pai. Este valor pode ser negativo ou positivo.
comprimento (por exemplo, 10em): posiciona a linha de base do elemento alvo em um ponto acima, abaixo ou na linha de base do elemento pai. Este valor pode ser negativo ou positivo.

Um modelo HTML básico

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <style>
   table {
       border-collapse: collapse;
       width: 100%;
   }
   
   td, th {
       border: 1px solid black;
   }
   </style>
   
   <title>Document</title>
</head>
   
<body>
   
<div id="container">
   
   <a href="http://google.com">Google Search</a>
   
   <img src="https://source.unsplash.com/jFCViYFYcus/300x150" alt=" image of the forest">
   
   <video width="320" controls>
       <source src="videos/ocean_view.mov" type="video/mp4">
       Video of the ocean.
   </video>
   
   <table>
       <tr>
           <th>Scenery</th>
           <th>Discription</th>
       </tr>
       
       <tr>
           <td>Forest</td>
           <td>Lorem ipsum dolor sit amet.</td>
       </tr>
       
       <tr>
           <td>Ocean</td>
           <td>Lorem ipsum dolor sit amet.</td>
       </tr>
   </table>
   
</div>
   
</body>
   
</html>

O código HTML acima cria uma página web simples que exibe quatro elementos: texto vinculado, uma imagem, um vídeo incorporado e uma tabela. Deve ficar assim no seu navegador:

Como alinhar texto verticalmente

Por padrão, a maioria dos elementos de texto (como títulos, tags

) são elementos de bloco. A única maneira de alinhar verticalmente esses elementos é primeiro convertê-los em elementos inline, usando a propriedade display.

No entanto, alguns elementos de texto, como as tags e , estão embutidos. Como resultado, eles suportam a propriedade vertical-align. Para alinhar o texto verticalmente, basta atribuir o valor apropriado à propriedade CSS vertical-align.

Usando o valor superior de alinhamento vertical no texto

a {
   vertical-align: top;
}

Adicionar o código CSS acima ao documento HTML básico alinhará o topo do texto da tag com o topo do elemento mais alto da linha. Produzindo a seguinte exibição atualizada:

Usando o valor percentual no texto

a {
    vertical-align: -50%;
}

O CSS acima alinha o elemento de texto em uma posição 50% abaixo da linha de base do elemento pai. Ele produz a seguinte saída em seu navegador:

Como você pode ver na imagem acima, o elemento texto ocupa uma posição abaixo dos elementos imagem e vídeo, que estão na mesma linha. Para posicionar este elemento na linha de base ou acima dela, use um valor percentual positivo.

Usando o valor de comprimento no texto

a {
    vertical-align: 90px;
}

O código acima alinha a linha de base do elemento de texto a um comprimento de 90px acima da linha de base do elemento pai. Isso produz a seguinte saída em um navegador:

Como alinhar imagens verticalmente

A tag é um elemento embutido, com o qual a propriedade CSS vertical-align funciona bem.

Usando o supervalor de alinhamento vertical em imagens

img {
    vertical-align: super;
}

O código acima posiciona a imagem na linha de base sobrescrita do elemento pai. Isso significa uma posição acima da linha de base, como você pode ver na saída a seguir:

Usando o valor percentual de alinhamento vertical em imagens

img {
    vertical-align: 25%;
}

O código acima alinha a linha de base do elemento de imagem 25% acima da linha de base do elemento pai. Isso produz o seguinte efeito de espelho do supervalor:

Usando o valor de comprimento de alinhamento vertical em imagens

img {
    vertical-align: 5px;
}

O código acima alinha a linha de base do elemento de imagem em uma posição 5px acima da linha de base do elemento pai. Isso produz um efeito semelhante ao dos valores super e 25%:

Como alinhar verticalmente a mídia incorporada

Mídias incorporadas, como vídeos e iframes, são elementos HTML embutidos. Portanto, a propriedade CSS vertical-align funciona muito bem com eles.

Usando o supervalor de alinhamento vertical em um vídeo

video {
    vertical-align: sub;
}

O código acima posiciona o vídeo na linha de base do subscrito do elemento pai. Isso significa que está em uma posição abaixo da linha de base, como você pode ver na saída a seguir:

Usando o valor percentual de alinhamento vertical em um vídeo

video {
    vertical-align: -25%;
}

O código acima alinha a linha de base do elemento de vídeo 25% abaixo da linha de base do elemento pai. Isso produz o seguinte efeito de espelho do subvalor:

Usando o valor de comprimento de alinhamento vertical em um vídeo

video {
    vertical-align: -5px;
}

O código acima alinha a linha de base do elemento de imagem em uma posição 5px abaixo da linha de base do elemento pai. Isso produz um efeito como os valores sub e -25%:

Como alinhar itens verticalmente em uma tabela

Usar a propriedade vertical-align com uma tabela é um pouco complicado, pois uma tabela é um elemento de bloco. No entanto, as tags e são elementos embutidos. Portanto, você pode usar a propriedade CSS vertical-align no texto de uma tabela.

Usando o valor superior de alinhamento vertical nos dados da tabela

td {
    height: 40px;
    vertical-align: top;
}

O código acima adiciona uma altura de 40px a cada célula da tabela. Em seguida, ele alinha os dados de cada célula ao topo de cada linha. Isso produz a seguinte saída no navegador:

Usando o valor médio de alinhamento vertical nos dados da tabela

td {
    height: 40px;
    vertical-align: middle;
}

O valor médio de alinhamento vertical no código acima centraliza verticalmente os dados dentro de cada célula. Produz a seguinte saída no navegador:

Usando o valor inferior de alinhamento vertical nos dados da tabela

td {
    height: 40px;
    vertical-align: bottom;
}

O código acima alinha os dados de cada célula na parte inferior de cada linha. Produz a seguinte saída no navegador:

Agora você pode alinhar os elementos da sua página da web

Agora você pode usar a propriedade CSS vertical-align com uma série de diferentes elementos embutidos, incluindo texto, mídia incorporada e dados de tabela. A regra geral é que a propriedade vertical-align funciona apenas em elementos inline e inline-block.

No entanto, você pode usar esta propriedade em elementos de bloco, basta convertê-los primeiro em elementos inline ou inline-block. Lembre-se de que você pode combinar o alinhamento vertical com outras propriedades de alinhamento, como alinhamento de texto.