Center content in card

Question

I wonder how to center vertically and horizontally the content of a card text (or card block).

Here's the code I'am using

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

I would like the "70.10" string to be aligned vertically and horizontally

Thank you for your help

Answer 1

Using an h1 here for styling purposes is not advised as you'll get issues with accessibility understanding the DOM structure of the page.

You'll want to put the text straight into the div.card-text element. Then create a set of styles that reflects the styling you want for the text, and in this case I've setup a new class so I can easily reuse this elsewhere.

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