Search code examples
htmlcssmaterializecentering

Divs fail to center content horizontally on the page

I've been using Materialize but hit a wall on this formatting. I can't seem to get it to center horizontally on the page. It just stays left justified no matter what change I make.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="row center">
  <div class="col s1 m1">
    <i class="material-icons tiny">star</i>
    <p style="margin-top: -5px; font-size: .8em; margin-bottom: -10px;">2016</p>
  </div>
  <div class="col s1 m1">
    <i class="material-icons tiny">star</i>
    <p style="margin-top: -5px; font-size: .8em; margin-bottom: -10px;">2017</p>
  </div>
  <div class="col s1 m1">
    <i class="material-icons tiny">star</i>
    <p style="margin-top: -5px; font-size: .8em; margin-bottom: -10px;">2018</p>
  </div>
</div>

View on JSFiddle

Solution

  • You can use col-offset-* utility class from materialize to center in the page

    Also, avoid using inline-styles, instead use CSS classes

    .number {
  margin-top: -5px;
  font-size: .8em;
  margin-bottom: -10px;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>



<div class="row center">
  <div class="col s1 offset-s5">
    <i class="material-icons tiny">star</i>
    <p class="number">2016</p>
  </div>
  <div class="col s1">
    <i class="material-icons tiny">star</i>
    <p class="number">2017</p>
  </div>
  <div class="col s1">
    <i class="material-icons tiny">star</i>
    <p class="number">2018</p>
  </div>
</div>