在mat-card-title中左右对齐

Question

在Angular 5中使用以下代码：

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

我明白了：

我怎样才能得到这个（有些文字是左对齐的，有些文字是右对齐的）？

我尝试创建div并使用预定义的css放入内部段落，但它没有成功。

Answer 1

您也可以使用更少的行来执行此操作，并使用容器和flex属性更好地调整内容：

<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;
  /* needed styles below */
  display: flex;
  justify-content: space-between;
  width: 500px;
}

您可以在此处查看工作示例：https://jsfiddle.net/VanessaRC/Lz9vz6bs/1/

这样可以确保，如果您将宽度调整到所需的容器，样式可以很好地调整以适应而不会破坏并保持HTML清晰易读。

Answer 2

使用flexbox：

.container {
  display: flex;
}

.fill {
  flex: 1;
}

<div class="container">
  <div>Card</div>
  <div class="fill"></div>
  <div>Title</div>
</div>

Answer 3

我看不到图像，但是这里是如何使用flex布局在div中拆分文本

＆＃13;

＆＃13;

value.CompareTo(value2) <= 0

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

尽管先前的张贴者已经充分解决了这个问题，但是一旦添加卡片内容，它就会变得更加复杂。 我建议看一下这个答案以获得更完整的解决方案：How to align left and right text mat-card-header in angular 4?