Search code examples
vmware-clarity

Center content in card

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

enter image description here

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

Solution

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