3

Tenho o seguinte formulário de login dentro de um card panel:

inserir a descrição da imagem aqui

O que eu poderia fazer para centralizar o meu card na página?

Este é o código que tenho até o momento:

<div class="input-field col s12">
  <input id="user_name" type="text" class="validate" required>
  <label for="user_name">Usuário</label>
</div>

<div class="input-field col s12">
  <input id="password" type="password" class="validate" required>
  <label for="password">Senha</label>
</div>

<div class="switch">
  <label>
    <input type="checkbox">
    <span class="lever"></span> Mantanha-me conectado
  </label>
</div>

<div class="input-field col s12">
  <br>
</div>

<div class="input-field col s12">
  <button class="waves-effect waves-light btn" type="submmit">Login
  </button>
</div>

<div class="input-field col s12">
  <a href="#">Ainda não é membro? Crie já uma conta!</a>
</div>
1
  • Você deseja centralizar o card todo na página? E também seria necessário ver o html completo, você só postou o html referente aos elementos DENTRO do card. 22/03/2016 às 21:26

1 Resposta 1

3

Você pode usar o offset para te ajudar nessa tarefa:

<div class="row">
  <div class="col s4 offset-s4 card">
    <!-- SEUS FIELDS -->
  </div>
</div>

Segue o jsfiddle.

Você pode tentar também na força bruta:

.card {
     position: absolute;
     left: 50%;
     top: 50%;
     -moz-transform: translate(-50%, -50%)
     -webkit-transform: translate(-50%, -50%)
     -ms-transform: translate(-50%, -50%)
     -o-transform: translate(-50%, -50%)
     transform: translate(-50%, -50%);
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .