polymer 1.0 how to central justify the paper-card

Question

I am trying this to central justify the paper card heading:

paper-card [heading]{
      @apply(--center-justified);
    }

but it does not seem to help. kindly suggest

Answer 1

heading is not an attribute so you cannot write like that.

You basically need to style the .title-text element inside the shadow dom, so use this instead -

paper-card::shadow #shadow .header .title-text {
    display: flex;
    justify-content: center;
}

Or use the polymer iron-flex-layout -

paper-card::shadow #shadow .header .title-text {
    @apply(--layout-vertical);
    @apply(--layout-center);
}

---

Update

Thanks to @sfeast for pointing it out. Since shadow selectors will be deprecated, the above styles need to be applied to the mixins like this -

paper-card {
    --paper-card-header: {
        @apply(--layout-vertical);
        @apply(--layout-center);
    };
}

Answer 2

The accepted answer is going to break since the shadow selector is/has been already I believe, deprecated.

The --paper-card-header mixin is available for what you would like to do. See the example for using mixins here - https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins