Entendendo e usando vertical-align: middle no CSS

• Introdução
• Entendendo o vertical-align
• Aplicando vertical-align: middle em Tabelas
• Exemplo Prático
• Demonstração no CodePen
• Conclusão

---

Introdução

O CSS fornece uma variedade de propriedades que nos permitem manipular a posição de elementos em uma página da web. Uma dessas propriedades é vertical-align, que é comumente usada para controlar o alinhamento vertical de conteúdo em elementos de tabela. Neste artigo, vamos explorar a propriedade vertical-align e como usá-la para centralizar o conteúdo de uma tabela.

---

Entendendo o vertical-align

A propriedade CSS vertical-align é usada para especificar o alinhamento vertical de um elemento inline ou células de tabela. Ela possui várias propriedades, as quais são descritas a seguir:

• baseline: Alinha a base da linha de texto do elemento com a base da linha de texto do pai.
• length: Ajusta o alinhamento vertical usando um valor de comprimento (por exemplo, px, pt, em, etc.)
• sub: Abaixa a base da linha do elemento abaixo da base da linha do pai.
• super: Eleva a base da linha do elemento acima da base da linha do pai.
• top: Alinha o topo do elemento com o topo da linha mais alta do elemento pai.
• text-top: Alinha o topo do elemento com o topo do texto do pai.
• middle: Alinha o ponto médio do elemento com o ponto médio da linha pai ou célula da tabela.
• bottom: Alinha a parte inferior do elemento com a parte inferior da linha mais baixa do elemento pai.
• text-bottom: Alinha a parte inferior do elemento com a parte inferior do texto do pai.
• initial: Define esta propriedade para o seu valor inicial.
• inherit: Herda esta propriedade do seu elemento pai.

Para o escopo deste artigo, vamos nos concentrar no middle, que alinha o ponto médio do elemento com o ponto médio da linha pai ou da célula da tabela.

---

Aplicando vertical-align: middle em Tabelas

Para alinhar verticalmente o conteúdo em uma célula de tabela, aplicamos a propriedade vertical-align: middle à célula desejada. Isso garantirá que o conteúdo da célula seja posicionado no meio, independentemente da altura da linha.

---

Exemplo Prático

Aqui está um exemplo de como você pode usar vertical-align: middle em uma tabela HTML:

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
/>

<div class="container">
  <table class="table table-striped table-hover">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Nome da Empresa</th>
        <th scope="col">Lucro Anual</th>
        <th scope="col">Valor das Cotas</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>R$200.000.000,00</td>
        <td>R$500,00</td>
      </tr>
      <tr>
        <td>Microsoft</td>
        <td>R$180.000.000,00</td>
        <td>R$400,00</td>
      </tr>
      <tr>
        <td>Amazon</td>
        <td>R$220.000.000,00</td>
        <td>R$550,00</td>
      </tr>
      <tr>
        <td>Facebook</td>
        <td>R$150.000.000,00</td>
        <td>R$300,00</td>
      </tr>
      <tr>
        <td>Google</td>
        <td>R$190.000.000,00</td>
        <td>R$450,00</td>
      </tr>
    </tbody>
  </table>
</div>

td {
  height: 75px;
}

tr {
  vertical-align: middle;
}

Neste exemplo, as células da tabela têm uma altura específica e o conteúdo é alinhado verticalmente no meio de cada célula.

---

Demonstração no CodePen

Você pode ver uma demonstração ao vivo deste exemplo no CodePen. Esta demonstração mostra o efeito do vertical-align: middle em um contexto real e dá uma ideia clara de como ele funciona em um layout de tabela.

---

Conclusão

A propriedade vertical-align do CSS é uma ferramenta útil para controlar o alinhamento vertical do conteúdo dentro de elementos de tabela. Ao entender como essa propriedade funciona e como aplicá-la corretamente, você pode ter mais controle sobre o layout e a apresentação de suas páginas da web. Como sempre, a experimentação é uma ótima maneira de aprender e entender como essas propriedades funcionam em diferentes contextos.

Comments

[Rodrigo Oler]

Se você achou este artigo útil, por favor, deixe um "like" e considere compartilhá-lo com seus colegas. Se você tiver sugestões ou dicas deixe um comentário! Sua contribuição pode enriquecer ainda mais a discussão e ser de grande ajuda para outros leitores. Obrigado!

[Joao Teixeira]

Muito top!

[Yang Li]

Welcome to DEV community!