Em CSS, a propriedade vertical-align controla o alinhamento vertical de elementos de nível embutido ou células de tabela dentro do elemento que os contém. Aplica-se a elementos que fazem parte de uma linha de texto ou são exibidos como bloco embutido ou célula de tabela.
A propriedade 'vertical-align' é comumente usada para elementos embutidos como imagens, texto ou elementos de bloco embutido dentro de uma linha de texto. Não se aplica diretamente a elementos de nível de bloco; entretanto, você pode usar técnicas como flexbox ou posicionamento para alinhá-los verticalmente.
Sintaxe:
Aqui está a sintaxe básica para a propriedade vertical-align:
selector { vertical-align: value; } O 'valor' pode ser uma das seguintes opções:
| Linha de base: | Alinha a linha de base do elemento com a linha de base do elemento pai. Este é o valor padrão para a maioria dos elementos.
| Sub: | Alinha a linha de base do elemento com a linha de base subscrita da fonte do elemento pai.
| Super: | Alinha a linha de base do elemento com a linha de base sobrescrita da fonte do elemento pai.
| Principal: | Alinhe a parte superior do elemento com a parte superior do elemento mais alto na linha dentro da caixa de linha.
| Texto superior: | Alinha a parte superior do elemento com a parte superior da fonte do elemento pai.
| Meio: | Centraliza verticalmente o elemento em relação ao elemento pai.
| Fundo: | Alinhe a parte inferior do elemento com a parte inferior do elemento mais baixo na linha dentro da caixa de linha.
| Texto inferior: | Alinhe a parte inferior do elemento com a parte inferior da fonte do elemento pai.
| Percentagem: | O elemento é alinhado verticalmente em uma porcentagem especificada da altura da linha. Por exemplo, vertical-align: 50% centralizará o elemento verticalmente dentro de seu elemento pai.
NOTA: Lembre-se de que o 'alinhamento vertical' tem seu comportamento específico dependendo do tipo de elemento e do contexto em que é usado, portanto seus efeitos podem nem sempre ser diretos. É particularmente útil para alinhar elementos embutidos com texto ou outros elementos embutidos.
Exemplos
Aqui estão mais alguns detalhes e exemplos relacionados à propriedade 'vertical-align' em CSS:
1. Alinhamento da linha de base:
Linha de base Outro texto
2. Subscrito e Sobrescrito:
| O alinhamento vertical: | O subvalor alinha a linha de base do elemento com a linha de base do subscrito da fonte do elemento pai, fazendo-o aparecer como um subscrito. Por outro lado,
| alinhamento vertical: | Super alinha a linha de base do elemento com a linha de base sobrescrita da fonte do elemento pai.
H2Ó é água. x2+ e2= r2
3. Alinhamento superior e inferior:
| O alinhamento vertical: | O valor superior alinha a parte superior do elemento com a parte superior do elemento mais alto na linha dentro da caixa de linha. De forma similar,
| alinhamento vertical: | A parte inferior alinha a parte inferior do elemento com a parte inferior do elemento mais baixo na linha dentro da caixa de linha.
Alinhado ao topo Alinhado na parte inferior
4. Alinhamento Médio:
| O alinhamento vertical: | O valor médio centraliza verticalmente o elemento em relação ao elemento pai. Isso geralmente é usado para centralizar ícones ou imagens no texto.
Este ícone está centralizado verticalmente 
5. Alinhamento da parte superior e inferior do texto:
| O alinhamento vertical: | O valor Text-top alinha a parte superior do elemento com a parte superior da fonte do elemento pai e
| alinhamento vertical: | Text-bottom alinha a parte inferior do elemento com a parte inferior da fonte do elemento pai.
Alinhado na parte superior do texto Alinhado na parte inferior do texto
6. Alinhamento percentual:
Usar um valor percentual com alinhamento vertical permite alinhar o elemento verticalmente em uma porcentagem específica de altura da linha. Por exemplo, vertical-align: 50% centralizará o elemento na metade da altura da linha.
Centralizado verticalmente
herança em c++
7. Centralização vertical de elementos em nível de bloco:
Para centralizar verticalmente um elemento de nível de bloco dentro de seu pai, você pode usar o flexbox ou o layout de grade.
Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 8. Centralização vertical com altura de elemento desconhecida:
Se você não sabe a altura do elemento que deseja centralizar verticalmente, pode usar uma combinação de posição e transformação:
html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 9. Centralização vertical com texto multilinha:
Para centralizar verticalmente o texto de várias linhas em um contêiner, você pode usar uma combinação de flexbox e um pseudoelemento:
html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } 10. Centralização vertical de imagens em um contêiner com diferentes proporções:
Se você tiver imagens de várias proporções que deseja centralizar em um contêiner, poderá usar uma combinação de flexbox e ajuste de objeto:
HTML:
<img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2">
CSS:
.parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; } 11. Combinando alinhamento vertical com altura da linha:
Você pode combinar a propriedade vertical-align com a propriedade line-height para obter um alinhamento vertical mais preciso, especialmente com tamanhos de fonte maiores.
.element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 12. Usando a propriedade display para alinhamento:
Embora o alinhamento vertical funcione principalmente com elementos de nível embutido, você pode alterar a propriedade display para obter alinhamento vertical para elementos de nível de bloco em contextos específicos.
.container { display: table-cell; vertical-align: middle; } 13. Alinhamento Vertical em Tabelas:
A propriedade vertical-align é frequentemente usada em células de tabela (
) para controlar o alinhamento do conteúdo dentro das células. | c booleano
td { vertical-align: middle; } 14. Alinhamento de elementos de bloco embutido:
Você pode usar o alinhamento vertical para alinhar elementos de bloco embutido em uma linha de texto, por exemplo, ícones ao lado do texto.
<span>⭐</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } Estes são apenas alguns exemplos de como lidar com o alinhamento vertical em diferentes cenários. Dependendo do seu layout e requisitos específicos, pode ser necessário adaptar ou combinar essas técnicas para alcançar os resultados desejados. CSS fornece várias ferramentas para lidar com o alinhamento vertical de forma eficaz em vários contextos.
Lembre-se de que, embora a propriedade vertical-align tenha utilidade, existem soluções mais abrangentes para todos os cenários de alinhamento, especialmente elementos em nível de bloco. Para layouts mais complexos e requisitos de alinhamento, é recomendado explorar técnicas modernas de layout CSS como Flexbox, CSS Grid ou até mesmo valores de posição CSS (como absolutos e relativos) para alcançar os resultados desejados de forma mais eficaz e previsível.
Lembre-se de que 'alinhamento vertical' afeta apenas elementos de nível embutido ou células de tabela. Use técnicas como flexbox, layout de grade ou posicionamento para alinhar verticalmente elementos em nível de bloco.
Mais alguns exemplos
table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3> Teste agora Saída
Agora tem outro exemplo em que estamos alinhando o texto com a imagem.
Exemplo
div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment. Teste agora Saída
Vantagens do alinhamento vertical em CSS
| Fácil de usar para elementos embutidos: | A propriedade vertical-align é simples para alinhar elementos, como imagens, ícones ou texto, dentro de uma linha de texto ou outros elementos.
| Amplo suporte ao navegador: | A propriedade vertical-align tem bom suporte ao navegador e é amplamente suportada em diferentes navegadores.
| Várias opções de alinhamento: | Ele fornece várias opções de alinhamento, como linha de base, meio, topo, fundo, texto superior, texto inferior, subscrito e sobrescrito, dando aos desenvolvedores flexibilidade no alinhamento de elementos com base em seus requisitos.
| Alinhamento responsivo: | Pode ser utilizado em design responsivo para adaptar o alinhamento vertical de acordo com o tamanho do contêiner ou espaço disponível.
| Simplicidade para elementos embutidos: | Para alinhar pequenos elementos como ícones ou imagens dentro de uma linha de texto, a propriedade vertical-align fornece uma solução relativamente simples sem exigir técnicas de layout complexas.
| Afinação: | A propriedade permite ajustar a posição vertical dos elementos, o que pode ser útil para atingir objetivos específicos de projeto.
| Consistência com células da tabela: | No contexto de tabelas, a propriedade vertical-align controla o alinhamento do conteúdo nas células da tabela. Isso pode ajudar a manter a consistência em layouts baseados em tabelas.
| Combinando com texto: | Ele alinha efetivamente elementos com conteúdo de texto, como alinha ícones ou rótulos embutidos com texto adjacente.
| Manutenção de proporções: | Ao alinhar imagens ou ícones dentro de uma linha de texto, o alinhamento vertical pode ajudar a manter a proporção desses elementos, especialmente quando combinado com tamanhos de fonte e alturas de linha apropriados.
| Correções rápidas de alinhamento: | Quando você precisar de soluções rápidas para problemas de alinhamento vertical, especialmente em cenários com conteúdo misto, o alinhamento vertical pode fornecer uma solução rápida sem exigir uma reestruturação extensa do layout.
| Estilo de e-mail CSS: | Em e-mails HTML, onde layouts complexos precisam de melhor suporte, o uso do alinhamento vertical pode ser útil para o alinhamento vertical básico de elementos sem depender de folhas de estilo externas ou técnicas complexas.
| Compatível com exibição: | inline-block: A propriedade vertical-align é compatível com elementos inline-block, permitindo fácil alinhamento vertical de tais elementos dentro de uma linha.
| Mantendo a consistência: | Para elementos que fazem parte de dados tabulares ou que precisam ser alinhados com elementos semelhantes em diferentes linhas ou colunas, o alinhamento vertical pode ajudar a manter a consistência visual.
| Compatibilidade do navegador: | Ao contrário de algumas técnicas CSS mais recentes, o alinhamento vertical faz parte do CSS há muito tempo e desfruta de boa compatibilidade entre navegadores.
Desvantagens do alinhamento vertical em CSS
| Limitado a elementos embutidos: | A limitação mais significativa da propriedade vertical-align é que ela só funciona para elementos de nível embutido ou células de tabela. Não se aplica diretamente a elementos de nível de bloco. Isso pode tornar o alinhamento vertical mais desafiador para elementos maiores ou layouts complexos.
| Comportamento inconsistente: | O alinhamento vertical pode ser complicado e inconsistente, especialmente com diferentes tamanhos de fonte, alturas de linha e elementos aninhados. O mesmo valor de alinhamento vertical pode produzir resultados diferentes com base no contexto.
| Peculiaridades do navegador: | Alguns navegadores mais antigos podem ter interpretações inconsistentes ou peculiaridades com a propriedade vertical-align, o que pode levar a resultados inesperados. No entanto, esse problema melhorou com o avanço dos navegadores modernos.
| Controle limitado sobre espaçamento: | A propriedade vertical-align trata principalmente do alinhamento de elementos verticalmente, mas oferece apenas um pouco de controle sobre o espaçamento entre os elementos. Ajustar o espaçamento geralmente requer modificações adicionais de CSS ou HTML.
| Flexbox e Grid como alternativas: | Para requisitos de layout mais complexos e alinhamento vertical de elementos em nível de bloco, os desenvolvedores geralmente contam com Flexbox ou CSS Grid, que fornecem soluções mais robustas e previsíveis.
| Não é adequado para centralização total: | Embora o alinhamento vertical seja útil para alinhar verticalmente elementos embutidos, ele é adequado para centralizar totalmente (horizontal e verticalmente) elementos em nível de bloco com técnicas CSS adicionais.
| Nome enganoso: | O nome 'alinhamento vertical' pode ser enganoso porque não alinha o elemento verticalmente da maneira que os desenvolvedores costumam esperar. Em vez disso, controla o alinhamento do conteúdo do elemento dentro de sua caixa de linha.
| Complexidade com fontes diferentes: | O comportamento do alinhamento vertical pode ser imprevisível ao lidar com elementos de diferentes tamanhos de fonte e alturas de linha. Isso pode tornar o alinhamento vertical consistente um desafio.
| Limitado para layouts complexos: | Não é adequado para layouts complexos ou cenários onde você deve alinhar verticalmente elementos maiores em nível de bloco dentro de um contêiner pai.
| Compatibilidade entre navegadores: | Embora os navegadores modernos tenham melhorado o suporte para alinhamento vertical, os navegadores mais antigos ainda podem apresentar inconsistências ou comportamento inesperado.
| Técnicas Alternativas: | Técnicas modernas de layout CSS, como Flexbox e CSS Grid, oferecem maneiras mais poderosas e previsíveis de lidar com requisitos complexos de layout, incluindo alinhamento vertical de elementos inline e em nível de bloco.
| Considerações de acessibilidade: | Usar o alinhamento vertical para layout pode não ser a abordagem mais acessível, pois pode interferir nos leitores de tela e outras tecnologias assistenciais. HTML semântico e técnicas CSS adequadas costumam ser escolhas melhores para acessibilidade.
| Desafios de depuração: | Depurar comportamentos inesperados ou problemas de alinhamento relacionados ao alinhamento vertical às vezes pode ser complicado, especialmente ao lidar com elementos aninhados e tamanhos de fonte variados.
| Evolução do Layout da Web: | À medida que o cenário de desenvolvimento web evolui, novas técnicas de layout como CSS Grid Layout e Flexbox fornecem soluções mais modernas e abrangentes para desafios de layout, tornando potencialmente o alinhamento vertical menos relevante para muitos cenários.
No geral, embora a propriedade vertical-align seja útil para alinhar elementos embutidos ou células de tabela dentro de uma linha de texto, os desenvolvedores geralmente precisam de outras técnicas CSS para requisitos de layout e posicionamento mais avançados, especialmente ao lidar com elementos em nível de bloco ou layouts complexos. CSS Flexbox e CSS Grid são alternativas poderosas para alinhamento mais amplo e controle de posicionamento.
Conclusão
A propriedade vertical-align é útil para alinhar elementos embutidos em células de texto ou tabela. No entanto, tem limitações e pode ser difícil de usar de forma eficaz para layouts complexos ou elementos em nível de bloco. Os desenvolvedores devem considerar técnicas modernas de layout CSS que forneçam mais controle e flexibilidade sobre alinhamento e posicionamento.
