Col / Card Panel Centering in Materialization

Question

<div class="container">
<div class="row">
<div class="col s5 m5 l5">
<div class="card-panel small blue z-depth-3 center-align">
<h1> Hello </h1>
</div>
</div>
</div>
</div>

What I'm trying to do is center the map pane in a column using the Materialize helper class center-alignthat doesn't work, I also tried using this class in an element col s5 m5 l5that also didn't work

can anyone suggest ways to fix this? even if it should be CSS

EDIT . I tried using the mediaize offset utility, but it is just messy.

Answer 1

You can achieve centering when you click / drag your columns. You have a total of 12 columns in a row, and instead of an example, make your column 6 wide instead of 5.

  <div class="row"> 
      <div class="col s6 offset-s3"><span class="flow-text">Centered</span></div>
  </div>

3 - 6 - 3, 12, , , . push/pull