Ir para o conteúdo

Centralização horizontal e vertical


Criado por Douglas, Set 19 2010 15:23

3 respostas neste tópico
  • Por favor, faça o login para responder

#1 Douglas

Douglas
  • Douglas
  • Colaborador
  • 4 Revisões

Revisou 19 setembro 2010 - 15:23


<style type="text/css">
#box {
width:600px;
height:400px;
position: absolute;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-200px;
background-color:#969696;
}
</style>

<div id="box">
Meu conteúdo 600 x 400 pixels
</div>


A lógica é simples, as margens sempre são negativas e metade do valor da lateral.

Ou seja no caso acima.
largura: 600px / 2 = 300px = margin-left: -300px
altura: 400px / 2 = 200px p= margin-top: -200px

#2 Franklin Javier

Franklin Javier
  • Franklin Javier
  • Colaborador
  • 6 Revisões

Revisou 21 fevereiro 2011 - 18:04

Também uso dessa forma ;)

#3 Carlos Coelho

Carlos Coelho
  • Carlos Coelho
  • Colaborador
  • 11 Revisões
  • LocalizaçãoGravataí - RS

Revisou 27 agosto 2011 - 12:11

Boa dica!
O conhecimento incompleto das potencialidades de uma linguagem de programação, pode conduzir a raciocínios (e conseqüentes projetos) relativamente limitados.

#4 Paulo Eduardo

Paulo Eduardo
  • Paulo Eduardo
  • Colaborador
  • 2 Revisões

Revisou 25 novembro 2011 - 10:35

Uma alternativa para encurtar o código é substituir a lógica horizontal por margin: auto;, lembrando que o primeiro valor da propriedade é o vertical, logo no exemplo do douglas o código ficaria assim.

<style type="text/css">
        #box {
                width:600px;
                height:400px;
                position: absolute;
                top:50%;
                margin:-200px auto 0;
                background-color:#969696;
        }
</style>

<div id="box">
        Meu conteúdo 600 x 400 pixels
</div>

Muda pouca coisa mas ai você só se preocupa com a altura




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)