5

Using the following code in Angular 5:

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

I get this: One text

How can I get this (some text is left-aligned, some text is right-aligned)? enter image description here

I tried creating div and put inside paragraphs with predefined css but it didnot work out.

Community
  • 1
  • 1
techkuz
  • 3,608
  • 5
  • 34
  • 62
  • how is the html for the second image created - is it 2 sets of cards or is it 2 sets of titles? – Pete Apr 16 '18 at 13:33
  • @Pete, I don't have html for the second image. I am trying to find the answer how to make one. At the moment I have only the first image – techkuz Apr 16 '18 at 13:35
  • 1
    Ah I would probably use venessa's solution then (apart from the fixed width - that's optional) – Pete Apr 16 '18 at 14:06

4 Answers4

13

You can also do it with fewer lines and adjust it better to the content by using a container and flex properties: 

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

and this 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;
}

You can check a working sample here: https://jsfiddle.net/VanessaRC/Lz9vz6bs/1/

This would ensure, that if you adjust the width to the container you need, the style adjusts nicely to fit without breaking and keeps your HTML clear and easy to read.

Vanessa
  • 351
  • 4
  • 16
  • It's 2023 now, and while I am looking at spacing title with search input, I have found use for the `mat-card-title-group` – Adam Cox Feb 15 '23 at 03:54
9

Use flexbox:

.container {
  display: flex;
}

.fill {
  flex: 1;
}
<div class="container">
  <div>Card</div>
  <div class="fill"></div>
  <div>Title</div>
</div>
Tomasz Kula
  • 16,199
  • 2
  • 68
  • 79
1

I Can't see images, but here is how you can split text in a div using flex layout

.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>
1

Although the previous posters address the question sufficiently, once you add card content, it gets more complicated. I'd suggest to look at this answer for a more complete solution: How to align left and right text mat-card-header in angular 4?

erin
  • 645
  • 1
  • 8
  • 22