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

html css materialize
Lord Goderick picture Lord Goderick · May 24, 2017 · Viewed 26.7k times · Source

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

Answer

Steven B. picture Steven B. · May 24, 2017

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.

Related questions

Materialize CSS - Select Doesn't Seem to Render

I am currently working with materialize CSS and it seems I've gotten snagged with the select fields. I'm using the example provided from their site but unfortunately it it's rendering in the view whatsoever. I was wondering if someone else …

Read More
Change color of underline input and label in Materialize.css framework

I'm using the Materialize.css framework and I noticed that the color of the text input fields is green and so is the label. Is there a way to change the color to something different? <input type="text" id="…

Read More
Horizontal and vertical alignment in materialize framework

How can I center the login box both horizontal and vertical? Here is my structure: <div class="container"> <div class="row"> <div class="col s12 m6"> <div class="card"> <div class="…

Read More