Using the following code in Angular 5
:
<mat-card>
<mat-card-title> Test message </mat-card-title>
</mat-card>
I get this:
How can I get this (some text is left-aligned, some text is right-aligned)?
I tried creating div
and put inside paragraphs with predefined css
but it didnot work out.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With