CODEWITHSUNDEEP
htmlcssmaterialize
Lord Goderick
Lord Goderick

Reputation: 985

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

Upvotes: 16

Views: 35751

Answers (3)

Darryl Dolan
Darryl Dolan

Reputation: 21

Add 'center' class to the surrounding div:

<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 must also have the 'row' class.

Upvotes: 2

Niraj
Niraj

Reputation: 619

You can center the button using materialize class center-align, but use it on <p> or <div> tag. since <a> tag is inline-block tag.

Here is the code.

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

Upvotes: 12

Steven B.
Steven B.

Reputation: 9362

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.

Upvotes: 19

Related Questions