Comments on: CSS – Centralizando conteúdo verticalmente

By: Pana

Pana — Fri, 13 Jan 2012 03:11:00 +0000

Quando eu uso esses codigos ele fica no centro da página e se tem uma div pai, ele não obdece, como faço para ele ficar no centro de uma outra div?

By: Hugo Júnior

Hugo Júnior — Fri, 11 Nov 2011 23:28:00 +0000

Leiam o título do post antes de falar besteira, é alinhamento VERTICAL, e
para os mal informados margin:auto só funciona para alinhamento
horizontal, e pro noobzinho ali line-height só aumenta o espaçamento
entre as linhas, ou seja vai ter que ter um tamanho fixo, e a idéia é
centralizar dinâmicamente.

Quebrei muito a cabeça na epoca que precisei disso para um site fluido, e
a solução mais viável que achei é exatamente como esta.

Sucesso!

By: Anderson - Calebe Design

Anderson - Calebe Design — Fri, 21 Oct 2011 19:14:00 +0000

galera e so usar a propriedade do css
line-height
ex: line-height: 40px;
ele faz isso automaticamente

By: Ivan Freitas Junior

Ivan Freitas Junior — Mon, 02 May 2011 18:26:00 +0000

Então,
para centralizar elementos faço de forma diferente, pois usando o position absolute podem cair elementos dependendo a resolução de tela, etc..
Bem, vamos a prática.

Alinhamento Horizontal:

.elemento_pai{
width:500px;
height:500px;
}
.elemento_filho{
width:200px;
height:180px;
margin:0 auto;
}
*também podemos usar o “text-align:center” no “elemento_pai”

Alinhamento Vertical:

.elemento_pai{
width:500px;
height:500px;
display:table-cel;
vertical-align:middle;
}
.elemento_filho{
width:200px;
height:180px;
}

Seguindo o tutorial acima.. , se o elemento a ser centralizado tiver 200px e o elemento_pai tiver, por exemplo, 600px, o elemento não será centralizado, pois terá uma distancia do topo de 50%, logo, 300px, e restará mais 300px abaixo. Tendo o elemento 200px. o resultado será 300px acima e 100px abaixo.. Ao fim não haverá centralização vertical.
Acredito que a maneira que apresentei acima funcione bem.

Ivan Freitas
ActionPlus – Comunicação Visual e Web.

By: Guilherme

Guilherme — Tue, 01 Feb 2011 13:30:35 +0000

@carlosfachini

Olha amigo, se não me engano esse estilo que você supôs ai é para alinhar horizontalmente e não verticalmente.

By: @carlosfachini

@carlosfachini — Fri, 17 Sep 2010 12:45:10 +0000

Tambem pode ser feiro assim

.centralizado {
width: 600px;
height: 300px;
margin-left:auto;
margin-right:auto;
}

Somente isso,com menos codigos ainda….

By: André Moura de Andrade

André Moura de Andrade — Tue, 17 Aug 2010 14:32:08 +0000

Muito bom a dica, eu estava procurando isso a um bom tempo.
Pois vale lembrar que essa CLASS que criamos tem que estar dentro de uma DIV com “Position:Relative”

Ao contrário não funciona…
Vlw galera…

By: Matheus Matos

Matheus Matos — Fri, 09 Oct 2009 16:00:40 +0000

Aew Dom!
Não tem muita diferença entre centralizar horizontalmente e verticalmente não.. a lógica é a mesma! Só as pessoas que não conseguem pensar!

Parabéns!

Vlw
Matheus Matos

By: yuri

yuri — Fri, 09 Oct 2009 14:32:26 +0000

ae dom,
parabéns pelo post…..sempre postando informações úteis!!

[]‘s