pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

Centralizar na vertical com três linhas de CSS

Aprenda como alinhar qualquer elemento HTML na vertical com apenas três linhas de CSS. A técnica consiste em usar a propriedade CSS transform, que normalmente é usada para girar elementos. Além dela utilizamos também a função translateY. Dessa forma centralizamos qualquer elemento na vertical, mesmo sem sabermos a altura do elemento.

Recomendo que leia também o artigo 10 Efeitos com Propriedades CSS3.

Isso é tudo que você precisa:

.elemento {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Utilizando o mesmo CSS você pode alinhar na vertical imagens, textos, etc. Veja uma demonstração:

Uma propriedade que não funciona como muitos esperam é A propriedade CSS vertical-align. Essa propriedade usamos quando o elemento a ser centralizado é um elemento inline. Para alinhar elementos nível de bloco (block) utilize a técnica mostrada neste artigo.

Curta a página do blog kadunew no Facebook. Siga-me no Twitter: @kadunew.

Categorias: CSS |

Comentários desativados.

Topo