右对齐 Material Design Card 中的标题文本答案

【问题标题】：Right align title text inside Material Design Card右对齐 Material Design Card 中的标题文本
【发布时间】：2021-02-02 17:19:07
【问题描述】：

我正在使用 Material Design (MDL) 卡片在标题中显示数值。我希望它们右对齐，但默认情况下它们是左对齐的。我尝试过设置各种样式，但它们都被忽略了。如何正确对齐卡片标题中的 h2？

  <div class="mdl-card card--count">
    <div class="mdl-card__title mdl-card--expand">
      <h2 class="mdl-card__title-text">
        999
      </h2>
    </div>
    <div class="mdl-card__supporting-text"><slot /></div>
  </div>

【问题讨论】：

标签： css material-design

【解决方案1】：

text-align: right; 无法工作，因为.mdl-card__title 正在使用 flex，因此您必须更改 justify-content 属性：

  .mdl-card__title {
    justify-content: flex-end;
  }

https://jsfiddle.net/f7ykzx1c/1/

【讨论】：

谢谢。这样可行。我将其应用于错误的元素。