Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
}
like image 863
Lord Goderick Avatar asked May 24 '17 14:05

Lord Goderick


People also ask

How do I center align an item in CSS?

Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.

How do you center a div in materialized?

use margin-top, margin-bottom to align the box at center.


1 Answers

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.

like image 186
Steven B. Avatar answered Oct 24 '22 17:10

Steven B.