Como posicionar elementos da Web com alinhamento vertical CSS

Pesquisa do Google









Cenário
Descrição






Floresta

Lorem ipsum dolor sit amet.






oceano

Lorem ipsum dolor sit amet.

o Código HTML acima cria uma página da 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,

, e

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

Usando o valor superior de alinhamento vertical no texto

uma {
 alinhamento vertical: topo;
}

Adicionando o Código CSS acima ao documento HTML básico alinhará a parte superior do tag text com a parte superior do elemento mais alto da linha. Produzindo o seguinte display atualizado:

Usando o valor percentual no texto

uma {
 alinhamento vertical: -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

uma {
 alinhamento vertical: 90px;
}

O código acima alinha a linha de base do elemento de texto em 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

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

Usando o supervalor de alinhamento vertical em imagens

img {
 alinhamento vertical: super;
}

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

Como usar o valor percentual de alinhamento vertical em imagens

img {
 alinhamento vertical: 25%;
}

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

Usando o valor de comprimento de alinhamento vertical em imagens

img {
 alinhamento vertical: 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%:

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

vídeo {
 alinhamento vertical: sub;
}

O código acima posiciona o vídeo na linha de base do subscrito do elemento pai. Isso significa 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

vídeo {
 alinhamento vertical: -25%;
}

O código acima alinha a linha de base do elemento de vídeo em 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

vídeo {
 alinhamento vertical: -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, o

Usando o valor superior de alinhamento vertical nos dados da tabela

td {
 altura: 40px;
 alinhamento vertical: topo;
}

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

Usando o valor do meio de alinhamento vertical nos dados da tabela

td {
 altura: 40px;
 alinhamento vertical: meio;
}

O valor central de alinhamento vertical no código acima centraliza verticalmente os dados em cada célula. Ele produz a seguinte saída no navegador:

Usando o valor inferior de alinhamento vertical nos dados da tabela

td {
 altura: 40px;
 alinhamento vertical: inferior;
}

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

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

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

No entanto, você pode usar esta propriedade em elementos de bloco, você só precisa convertê-los em elementos de bloco embutidos ou embutidos primeiro. Lembre-se de que você pode combinar alinhamento vertical com outras propriedades de alinhamento, como alinhamento de texto.

Sobre o autor

Kadeisha Kean (52 artigos publicados)

Kadeisha Kean é desenvolvedora de software full-stack e escritora técnica/tecnológica. Ela tem a habilidade distinta de simplificar alguns dos conceitos tecnológicos mais complexos; produzindo material que pode ser facilmente compreendido por qualquer novato em tecnologia. Ela é apaixonada por escrever, desenvolver softwares interessantes e viajar pelo mundo (através de documentários).

Mais de Kadeisha Kean