How to center a card panel in materialize css?

Asked

Viewed 3,483 times

3

I have the following login form inside a card panel:

inserir a descrição da imagem aqui

What I could do to center my card on the page?

This is the code I have so far:

<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>
css materialize

  • Do you want to center the entire card on the page? And you would also need to see the full html, you just posted the html referring to the elements INSIDE the card.

1 answer

3


You can use the offset to help you in this task:

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

Follows the jsfiddle.

You can also try at brute force:

.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%);
}

Browser other questions tagged css materialize

You are not signed in. Login or sign up in order to post.