Entendendo e usando vertical-align: middle no CSS
Tags: css, dev, web, frontend
Published: 2023-07-18 04:19:53

---
title: Entendendo e usando vertical-align: middle no CSS
published: true
description: Como alinhar conteúdo verticalmente em elementos de tabela com CSS
tags: css, dev, web, frontend
---

- [Introdução](#introdução)
- [Entendendo o `vertical-align`](#entendendo-o-vertical-align)
- [Aplicando `vertical-align: middle` em Tabelas](#aplicando-vertical-align-middle-em-tabelas)
- [Exemplo Prático](#exemplo-prático)
- [Demonstração no CodePen](#demonstração-no-codepen)
- [Conclusão](#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:

```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>
```

```css
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.

{% codepen https://codepen.io/rodrigooler/pen/OJaZMRE %}

---

### 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.