09
fev

Como criar uma caixa DIV centralizada ao meio

Como criar uma caixa (Box) DIV CSS com alinhamento centralizado ao meio

Olá Prezados leitores do Blog Dicas do Artony!

Para os iniciantes, as propriedades CSS exigem muita paciência, perseverança e prática para alcançar o resultado desejado! Durante muito tempo, sempre quis descobrir como criar uma caixa (Box) DIV CSS, com alinhamento centralizado e ao meio. Para facilitar o entendimento, vou mostrar uma imagem com três elementos alinhados:

  1. centro e topo = center top
  2. centro e meio = center middle
  3. centro e inferior = center bottom

Os atributos base da categoria "text-align" são: "left" (Esquerda), "center" (Centro) e "right" (Direita).
Os atributos base da categoria "vertical-align" são: "top" (Topo), "middle", (Meio) e "bottom" (Inferior).

Alinhamento de elementos

Para aplicar o alinhamento centralizado (Center) é simples, basta aplicar o atributo: "text-align: center" à caixa DIV, outra forma de alinhar ao centro, é criar a caixa DIV dentro da poderosa tag: "<center></center>", nesse segundo caso, até a DIV, será alinhada ao centro da página. Até agora simples e perfeito!

Texto centralizado pelo atributo: "text-align: center"
Texto centralizado pela tag: "<center></center>"

O problema começa quando tentamos aplicar a propriedade: "vertical-align: middle", que em teoria seria responsável por "levar" um texto, uma imagem ou ambos até o meio da caixa DIV, não funciona. O atributo "text-align: center" funciona corretamente, porém, o "vertical-align: middle" não coopera. Veja abaixo, o código usado na DIV que falhou em "levar" a imagem e o texto para o meio da caixa.

DIV com alinhamento centralizado e ao meio (Falha!)

<div style="background: #EEEEEE; border: solid 1px #CCCCCC; height: 175px; text-align: center; vertical-align: middle; width: 175px;">
<img src="http://i.imgur.com/Up6azM7.png" />
Imagem e texto alinhado pelo atributo: "<span style="color: blue;">vertical-align: middle</span>" (<span style="color: red;">Falha</span>)
</div>


Imagem e texto alinhados pelo atributo: "vertical-align: middle" (Falha!)

A explicação que encontrei para essa falha do atributo "vertical-align", foi no blog maujor, uma sumidade em CSS e HTML. É que segundo a W3C, tal atributo destina-se a alinhar textos verticalmente que estejam dentro de uma linha ou em uma célula de tabela. Agora, sabendo desse detalhe, curioso que sou, fui testar o atributo "vertical-align" em uma tabela e sem nenhuma surpresa, realmente funciona! Veja abaixo o código utilizado.

Tabela com alinhamento text-align: center e vertical-align: middle. (Sucesso!)

<center>
<table style="border: ridge 5px #87CEFA; width: 180px; height: 180px;"><tbody>
<tr><td style="text-align: center; vertical-align: middle;"><img src="http://i.imgur.com/0F45VCj.png" />
Imagem e texto alinhados ao centro e ao meio em uma tabela. (<span style="color: green;">Sucesso!</span>)</td></tr>
</tbody></table>
</center>


Imagem e texto alinhados ao centro e ao meio em uma tabela. (Sucesso!)

E agora, nossa tentativa em relação a DIV definitivamente falhou? Não! Segundo o "Dinossauro" das CSS, Maurício Samy Silva, para alcançarmos o resultado de alinhamento centralizado e ao meio em uma DIV, basta apenas aplicarmos à caixa DIV o atributo: "display: table-cell" (Que até então, eu sequer conhecia). Isso fará a DIV ter um comportamento de célula de tabela. Realmente só um mestre para desvendar coisas tão complexas para leigos de uma forma tão simples e direta! Veja abaixo, os códigos utilizados nas DIVs, aplicando as propriedades "text-align: center", "vertical-align: middle" e "display: tabel-cell" e em seguida os resultados.

Texto em uma DIV com as propriedades: "text-align: center", "vertical-align: middle" e "display: table-cell". (Sucesso!)

<div style="background: #EEEEEE; border: solid 1px #CCCCCC; display: table-cell; height: 175px; text-align: center; vertical-align: middle; width: 175px;">
Texto centralizado ao meio pelos atributos: "text-align: center", "vertical-align: middle" e "display: table-cell".
</div>

Imagem em uma DIV com as propriedades: "text-align: center", "vertical-align: middle" e "display: table-cell". (Sucesso!)

<div style="background: #EEEEEE; border: solid 1px #CCCCCC; display: table-cell; height: 175px; text-align: center; vertical-align: middle; width: 175px;">
<img src="http://i.imgur.com/0F45VCj.png" />
</div>

Imagem e texto em uma DIV com as propriedades: "text-align: center", "vertical-align: middle" e "display: table-cell". (Sucesso!)

<div style="background: #EEEEEE; border: solid 1px #CCCCCC; display: table-cell; height: 175px; text-align: center; vertical-align: middle; width: 175px;">
<img src="http://i.imgur.com/0F45VCj.png" />
Imagem e texto centralizados ao meio pelos atributos: "text-align: center", "vertical-align: middle" e "display: table-cell".
</div>

Texto centralizado ao meio pelos atributos: "text-align: center", "vertical-align: middle" e "display: table-cell"

Imagem e texto centralizados ao meio pelos atributos: "text-align: center", "vertical-align: middle" e "display: table-cell"

Para finalizar essa postagem, repito o que disse no início: CSS exige muita paciência, perseverança e prática. Mas, sem sombra de dúvida, é um mundo fascinante!

Espero que tenham gostado dessa dica! Gostou? Compartilhe! Um abraço e até a próxima!

Para receber postagens no seu E-mail, assine nossa Newsletter! → Clique e assine agora!
Informar link quebrado eu erro nesta postagem!dicasdoartony@gmail.com

Comments

Loading... Logging you in...
  • Logged in as
There are no comments posted yet. Be the first one!

Post a new comment

Comments by

Voltar ao topo!