I need to align the text content in the header on left and right side of header tag. i tried different ideas, but none works for me. help me.
<div style="width: 40%">
<mat-card>
<mat-card-header class="card-container">
<mat-card-title class="card-container-right"> Test right</mat-card-title>
<mat-card-title class="card-container-left"> Test left</mat-card-title>
</mat-card-header>
<mat-card-content>
</mat-card-content>
</mat-card>
</div>
Have attempted to utilize the following CSS styles: justify-content: center margin-left: auto , margin-right: auto margin-left: 50% , margin-right: 50% content-align: center etc.
To set the heading alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <h1> to <h6> tag, with the CSS property text-align. HTML5 do not support the align attribute of the heading tag, so the CSS style is used to set alignment.
You can also do this if you want to continue to use the mat-title
elements:
See working StackBlitz Example
In your (I'll call it) example-card.component.html file
<mat-card >
<mat-card-header>
<mat-card-title class="card-container-left"> Test left</mat-card-title>
<mat-card-title class="card-container-right"> Test right</mat-card- title>
</mat-card-header>
<mat-card-content>
</mat-card-content>
Then in your example-card.component.css
.card-container-right{
display: inline;
float: right;
}
.card-container-left{
display: inline;
}
..and finally in your styles.css
.mat-card-header-text{
width: 100% !important;
}
The trick to this is overriding Angular materials .mat-card-header-text
to be 100% the width of the mat-card-header
. Otherwise it behaves like in inline element and only takes up the width of its children elements text. Preventing you from spacing them out.
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