Центр содержания в карточке

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