在 Material 设计卡片内右对齐标题文本

Question

我正在使用 Material 设计 (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>

Answer 1

text-align: right; 将不起作用，因为 .mdl-card__title 使用 flex，因此您必须更改 justify-content 属性:

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

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

在 Material 设计卡片内右对齐标题文本

Right align title text inside Material Design Card

css

material-design