Netmundo Netmundo

Centralizando um elemento no meio da página

Dica rápida e rasteira para centralizar um elemento em uma página (especialmente formulários de login). Há várias maneiras de se fazer isso, aí vai uma simples:

O seu css:

body {     margin: 0px     }

#horizontal {     text-align: center;     position: absolute;     top: 50%;     left: 0px;     width: 100%;     height: 1px;     overflow: visible;     visibility: visible;     display: block }

#conteudo {     margin-left: -125px; /* Metade negativa da largura (width) da div */     position: absolute;     top: -35px; /* Metade negativa da altura (height) da div */     left: 50%;     width: 250px;     height: 70px;     visibility: visible }

O HTML

Você pode adicionar o que quiser dentro da div #conteudo. Lembre-se que ela precisa ter um tamanho fixo para podermos calcular corretamente a posição dela em relação à página.

    
        
                     Texto centralizado                 
    

Adaptado daqui. Quem prefere jQuery também tem uma opção.

Comentários

Carregando comentários…

Deixe um comentário