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

Question

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

What do you want to center the button inside of? – Steven B. May 24 '17 at 14:25 — Steven B., May 24 '17 at 14:25
Just a regular full width `div` – Lord Goderick May 24 '17 at 14:27 — Lord Goderick, May 24 '17 at 14:27

score 19 · Accepted Answer · answered May 24 '17 at 14:29

19

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.

answered May 24 '17 at 14:29

Steven B.

8,962
3
24
45

Also, do you know how to position the button with `px`? My CSS does not seem to be having any effect. – Lord Goderick May 24 '17 at 14:33
@LordGoderick Not sure what you mean. What are you trying to do? – Steven B. May 24 '17 at 14:36
As in I want to nudge the button by `20px` to the left for example. Where would I override the original CSS? – Lord Goderick May 24 '17 at 14:46
@LordGoderick Adding an id to the anchor tag and targeting that with `margin-right:20px` would be the easiest way. – Steven B. May 24 '17 at 15:02
Oh my goodness, I did that before I asked you and it didn't work. But now it suddenly works, probably clumsy mistake. Thank you. – Lord Goderick May 24 '17 at 15:05

score 12 · Answer 2 · answered May 24 '17 at 14:30

12

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>

answered May 24 '17 at 14:30

Niraj

602
2
7
12

1

This is the easiest way to do it. – John Quasar Aug 17 '17 at 06:23

score 2 · Answer 3 · answered Oct 20 '18 at 20:12

2

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.

answered Oct 20 '18 at 20:12

Darryl Dolan

21
1
4

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

3 Answers3