Ir ao conteúdo
  • Cadastre-se
Charlie Fox

Centralizar div para login

Recommended Posts

Bom dia a todos

 

Estou com dificuldade em utilizar um template de pagina de login que achei na internet. Segue o codigo e como fica a pagina: http://codepen.io/T-P/pen/bpWqrr

Essas classes são do Framework MaterializeCss, que tem como objetivo deixar as paginas com Material Design do Google, gosto muito deste estilo, por isso estou tentando utiliza-lo, ao invés do Bootstrap.

O problema aqui é que o código está utilizando a tag <center>, e pelo que pesquisei, essa tag não é mais suportada pelo HTML5, toda a parte de estilização da página deve ser feita pelo CSS. Mas não encontro nenhuma maneira de fazer isso utilizando CSS.

 

Minha primeira tentativa foi colocar uma div utilizando as classes de grid do Framework, coloquei para ocupar 3 colunas, mas como o sistema de grid é de 12 colunas, ele nunca fica centralizado, porque é um numero ímpar, ou ele fica uma coluna pra direita ou uma para esquerda.  :(

 

Depois tentei fazer utilizando margin: 0 auto. Depois tentei left: 50%.

Mas a div não sai do lugar, tem algum jeito de centralizar tanto verticalmente quanto horizontalmente, sem fazer um monte de gambiarra?

obrigado e bom domingo.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde amigo, para centralizar uma div (digamos que ela tenha 400x400px):

top:50%;
left:50%;
margin-left:-200px;
margin-top:-200px;

No caso do seu problema, eu substituiria o <center> com uma div com posicionamento absoluto e tamanho fixo e ai aplicaria este codigo.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Charlie Fox Têm diversas maneiras de centralizar....  a mais usada é o margin: 0 auto mesmo.

Atualmente existe outro método chamado flex. que é o do seu exemplo. ele é bem recomendado!

Ou usar a gambiarra do amigo acima baseado no tamanho do seu elemento.

 

De fato o center é uma tag obsoleta. Não use.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@TulioBotinha @dif  Obrigado pela resposta

Eu vi o pessoal recomendando esse metodo utilizando flex.

Bom, eu criei uma id pro container e coloquei width pra ele, e quando vi, ele estava centralizado. Não sei exatamente o que aconteceu, pois como eu disse, peguei esse template e tentei adapta-lo no meu projeto. 

Vou tentar analisar pra ver o por quê disso ter acontecido, o bom é que funcionou rs  :D

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Charlie Fox Você pode combinar os atributos e elementos.. por exemplo:

DIV class="login"
    --DIV class="form"
           --FORM

E no CSS

dizer que o class login fica centralizado com margin: zero auto;

o class form  também margin zero auto com umk width definido...

e o form em si, você aplica um margin-left. 

 

é outra forma de resolver o problema...

 

Exemplo: https://jsfiddle.net/nuzkywqm/

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×