在 mat-card-title 中左右对齐

Posted 2023-03-05

【中文标题】在 mat-card-title 中左右对齐

【英文标题】：Align left and right in mat-card-title

【发布时间】：2018-09-26 06:22:52

【问题描述】：

在Angular 5中使用以下代码：

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

我明白了：

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

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

【问题讨论】：

第二张图片的 html 是如何创建的 - 是 2 组卡片还是 2 组标题？

@Pete，我没有第二张图片的 html。我正在努力寻找如何制作的答案。目前我只有第一张图片

啊，我可能会使用 venessa 的解决方案（除了固定宽度 - 这是可选的）

【参考方案1】：

我看不到图像，但这是使用 flex 布局在 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】：

使用弹性框：

.container 
  display: flex;


.fill 
  flex: 1;

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

【参考方案3】：

你也可以用更少的行来做到这一点，并通过使用容器和 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;
  width: 500px;

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

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

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

【参考方案4】：

虽然之前的海报充分解决了这个问题，但一旦添加卡片内容，它就会变得更加复杂。 我建议查看此答案以获得更完整的解决方案：How to align left and right text mat-card-header in angular 4?