- 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.
Top comments (3)
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!
Muito top!
Welcome to DEV community!