CODEWITHSUNDEEP
htmlcssangularangular-materialangular5
techkuz
techkuz

Reputation: 3981

Align left and right in mat-card-title

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.

Upvotes: 6

Views: 50473

Answers (4)

Vanessa
Vanessa

Reputation: 351

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.

Upvotes: 13

erin
erin

Reputation: 665

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?

Upvotes: 1

Tomasz Kula
Tomasz Kula

Reputation: 16847

Use flexbox:

.container {
  display: flex;
}

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

Upvotes: 10

user4676340
user4676340

Reputation:

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>

Upvotes: 1

Related Questions