web-dev-qa-db-fra.com

Comment centrer un bouton en utilisant Materialize CSS?

Je n'arrive pas à trouver de documentation sur le site Materialise concernant le positionnement des éléments. Quelqu'un peut-il m'aider à centrer ce bouton? Merci d'avance.

<div id="div">

    <a class="waves-effect waves-light btn-large blue"><i class="material-icons right">cloud</i>Enter</a>

</div>

#div {
  width: 100%;
  height: 100vh;
}
htmlcssmaterialize
7
Lord Goderick

Alignement vertical: 
Utilisez un wrapper et donnez au wrapper une classe de .valign-wrapper

<div class="valign-wrapper">
  <h5>This should be vertically aligned</h5>
</div>

Alignement horizontal:
Utilisez .left-align, .right-align, .center-align sur l'élément à centrer.

Voir documentation .

8
Steven B.

Vous pouvez centrer le bouton à l'aide de la classe materialize centre center-align, mais l'utiliser sur les balises <p> ou <div>. depuis <a>, balise inline-block.

Voici le code.

<p class="center-align">
 <a class="waves-effect waves-light btn-large blue"><i class="material-icons right">cloud</i>Enter</a>
</p>
6
Niraj

Ajouter la classe 'centre' à la division environnante: 

<div id="div" class="row center">
   <a class="waves-effect waves-light btn-large blue"><i class="material-icons 
   right">cloud</i>Enter</a>
</div>

Note - div doit aussi avoir la classe 'row'.

0
Darryl Dolan