卡片中的内容居中

Question

我想知道如何将卡片文本(或卡片块)的内容垂直和水平居中。

​

​

下面是我正在使用的代码

<div class="clr-row">
  <div class="clr-col-2">
    <div class="card">
      <div class="card-header">This month credits used</div>
      <div class="card-block">
        <div class="card-text" *ngIf="credits.length > 0">
          <h1>{{creditsCurrent | number : '1.2-2'}}</h1>
        </div>
      </div>
    </div>
  </div>
</div>

我希望"70.10“字符串垂直和水平对齐

谢谢你的帮助

Answer 1

不建议在这里使用h1设置样式，因为您在理解页面的DOM结构时会遇到可访问性问题。

您需要将文本直接放入div.card-text元素中。然后创建一组样式，以反映您想要的文本样式，在本例中，我设置了一个新类，以便在其他地方轻松重用。

<div class="clr-row">
  <div class="clr-col-2">
    <div class="card">
      <div class="card-header">This month credits used</div>
      <div class="card-block">
        <div class="card-text numeric-card-text" *ngIf="credits.length > 0">
          {{creditsCurrent | number : '1.2-2'}}
        </div>
      </div>
    </div>
  </div>
</div>

.numeric-card-text {
  text-align: center;
  font-size: 2rem;
  padding: 1rem;
  font-weight: 400;
}