带材质的铁路超高居中文字

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