web-dev-qa-db-ja.com

mat-card-titleで左揃えと右揃え

Angular 5で次のコードを使用：

  <mat-card>
      <mat-card-title> Test message </mat-card-title>
  </mat-card>

私はこれを手に入れます： One text

どうすればこれを取得できますか（一部のテキストは左揃え、一部のテキストは右揃えです）？ enter image description here

私はdivを作成してcssが事前定義された段落の内側に配置しようとしましたが、うまくいきませんでした。

htmlcssangularangular-materialangular5
4
techkuz

コンテナーとフレックスプロパティを使用して、行数を減らしてコンテンツに合わせて調整することもできます。

<mat-card class="card-container">
  <mat-card-title > Test message </mat-card-title>
  <mat-card-title> Test message </mat-card-title>
</mat-card>

そしてこのCSS：

.card-container {
  /*  not needed styles to reflect it */ 
  background: blue;
  padding: 10px;
  color: white;
  width: 500px;

  /* needed styles below */
  display: flex;
  justify-content: space-between;
}

ここで作業サンプルを確認できます： https://jsfiddle.net/VanessaRC/Lz9vz6bs/1/

これにより、必要なコンテナーに合わせて幅を調整した場合、スタイルが途切れることなく適切に調整され、HTMLが明確で読みやすくなります。

8
Vanessa

フレックスボックスを使用：

.container {
  display: flex;
}

.fill {
  flex: 1;
}
<div class="container">
  <div>Card</div>
  <div class="fill"></div>
  <div>Title</div>
</div>
7
Tomasz Kula

画像が表示されませんが、これはフレックスレイアウトを使用してdiv内のテキストを分割する方法です

.container {
  /* Style */
  height: 64px;
  line-height: 64px;
  background: teal;
  color: white;
  font-family: Helvetica;
  padding: 12px;
  box-sizing: border-box;
  /* Actual logic */
  display: flex;
  align-items: center;
  justify-content: center;
}

.container div:last-child {
  text-align: right;
}

.container div {
  flex: 1 1 auto;
}
<div class="container">
  <div>Card</div>
  <div>Title</div>
</div>
2
user4676340

以前のポスターは問題に十分に対処していますが、カードのコンテンツを追加すると、さらに複雑になります。より完全な解決策については、この回答を確認することをお勧めします： 左と右のテキストmat-card-headerをangular 4？）で整列する方法

1
erin