Search code examples
htmlcssmaterialize

How does one center-align a button using Materialize CSS?


I can't seem to find any documentation on the Materialize website regarding positioning of elements. Can anyone help me center this button? Thanks in advance.

<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;
}

Solution

  • Vertical Alignment:
    Use a wrapper and give the wrapper a class of .valign-wrapper

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

    Horizontal Alignment:
    Use .left-align, .right-align, .center-align on the element to be centered.

    See documentation.