Cant Center text with materializecss

Question

我正在使用materializecss开发一个html Web应用程序.

我正在努力使用他们的助手.我想把我的号码和文字集中在一起:

为了更好地查看我的代码:

@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

您正在使用该课程center:

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

那个班只是补充道text-align: center.也就是说,它将该块内部的内联内容居中,但不会使块本身居中.

为此,您应该使用该类center-block:

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

这班台margin-left和margin-right到auto.这是块的中心(或Flex项目,在这种情况下;参见8.1.与自动边距对齐).

@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>