Cant Center text with materializecss

Question

I am using the materializecss for developing a html web app.

I am struggling using their helpers. I am trying to center my number and text:

For a better look at my code:

@import 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css';

<div class="row">
  <div class="col s12 m7">
    <div class="card valign-wrapper">
      <div class="card-content valign center" >
        <div class="row">
          <h3 class="center-align orange-text text-darken-2"> 406 </h3>
          <p class="center-align">Beers Tasted</p>
        </div> 
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col s12 m7">
    <div class="card valign-wrapper">
      <div class="card-content valign center" >
        <div class="row">
          <h3 class="center-align orange-text text-darken-2"> 26 </h3>
          <p class="center-align">Breweries Visited</p>
        </div> 
      </div>
    </div>
  </div>
</div>

Answer 1

You are using the class center:

<div class="card-content valign center">

That class just adds text-align: center. That is, it centers inline content inside that block, but doesn't center the block itself.

To do that, you should use the class center-block instead:

<div class="card-content valign center-block">

That class sets margin-left and margin-right to auto. That centers the block (or the flex item, in this case; see 8.1. Aligning with auto margins).

@import 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css';

<div class="row">
  <div class="col s12 m7">
    <div class="card valign-wrapper">
      <div class="card-content valign center-block" >
        <div class="row">
          <h3 class="center-align orange-text text-darken-2"> 406 </h3>
          <p class="center-align">Beers Tasted</p>
        </div> 
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col s12 m7">
    <div class="card valign-wrapper">
      <div class="card-content valign center-block" >
        <div class="row">
          <h3 class="center-align orange-text text-darken-2"> 26 </h3>
          <p class="center-align">Breweries Visited</p>
        </div> 
      </div>
    </div>
  </div>
</div>

Answer 2

You can do that by centering the .card-content div like this:

.card .card-content {
    margin: 0 auto;
}