Ir ao conteúdo
  • Cadastre-se

Centralizar div para login


Posts recomendados

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.

 

Link para o comentário
Compartilhar em outros sites

  • Moderador

@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.

 

Link para o comentário
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
Link para o comentário
Compartilhar em outros sites

  • Moderador

@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/

 

Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades 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

×
×
  • Criar novo...