Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 477
techkuz Avatar asked Nov 28 '22 22:11

techkuz


1 Answers

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.

like image 180
Vanessa Avatar answered Dec 05 '22 19:12

Vanessa