Cant Center text with materializecss

Question

我使用materializecss开发html网络应用。

我正在努力使用他们的助手。我试图将我的号码和文字集中在一起：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

你可以通过将.card-content div集中在一起来实现这一点：

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