Components: [md-card]: div.mat-card-header-text should have a width of 100% or something similar

[the-ult]

Bug, feature request, or proposal:

bug/proposal

What is the expected behavior?

I would expect the the md-card-title to have a width the same as the card-width

What is the current behavior?

I would like to be able to align elements within the md-card-title . In this particular case a Title on the left and a button (or a date or something similar on the right side)

e.g.

<md-card-header>

  <md-card-title fxLayout  fxLayoutAlign="space-between stretch">
            {{ title }}
            <button md-icon-button
                    color="primary"
                    (click)="add()">
                    <md-icon>playlist_add</md-icon>
          </button>
  </md-card-title>
  <md-card-subtitle>
    subtitle
  </md-card-subtitle>
  <img md-card-avatar>
</md-card-header>

However, since there is an extra div.mat-card-header-text generated without a width: 100% the md-card-title doesn't use the cards full-width

<md-card-header>
  <img md-card-avatar>
  <div  class="mat-card-header-text">
    <md-card-title fxLayout  fxLayoutAlign="space-between stretch">
            {{ title }}
            <button md-icon-button
                    color="primary"
                    (click)="add()">
                    <md-icon>playlist_add</md-icon>
          </button>
    </md-card-title>
  </div>
</md-card-header>

And it is not possible to override the .mat-card-header-text

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

ng version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.1.0
node: 8.0.0
os: win32 x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.6
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/platform-server: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

Is there anything else we should know?

[jelbourn]

See #2112

[the-ult]

Setting the .mat-card-header-text width in a global .css worked. Doesn't seem as the best solution, but thanks.

keep up the good work.

[RomulusDeRome]

To center the content of the title, just add the following CSS code
.mat-card-header { justify-content: center; }

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}