卡中的中心内容

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