CODEWITHSUNDEEP
cssmaterial-design
Connie DeCinko
Connie DeCinko

Reputation: 902

Right align title text inside Material Design Card

I'm using a Material Design (MDL) card to display numeric values in the title. I want them to be aligned right but by default they are left aligned. I've tried setting various styles but they all are ignored. How can I right align the h2 in the card title?

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

Upvotes: 0

Views: 117

Answers (1)

Laurens
Laurens

Reputation: 2607

text-align: right; won't work as .mdl-card__title is using flex, so you have to change the justify-content property:

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

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

Upvotes: 1

Related Questions