无法使用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>

- Mike

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>

- Oriol

Answer 2

你可以通过以下方式使.card-content div居中：

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

- aleksandar