I have been attempting to align the button vertically within the mat-card-content, but without success. The title is currently left-aligned and centered vertically as desired. When I make changes to my HTML or add more divs, the alignment gets worse.
https://i.sstatic.net/uwvwr.png
To better understand the layout, I used contrasting background colors whenever adjustments were made.
<div>
<div *ngFor ="let recipe of cookbook">
<mat-card class="recipe">
<mat-card-content class="title"> {{recipe.title}}
<button mat-icon-button [matMenuTriggerFor]="menu" class="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<span>Edit</span>
</button>
<button mat-menu-item>
<span>Delete</span>
</button>
</mat-menu>
</mat-card-content>
</mat-card>
</div>
</div>
.recipe {
width : 400px;
height: fit-content;
background-color: #d4d4d4;
padding: 15px;
margin: 15px;
border-radius:4px;
}
.more {
right:-20%;
background-color: red;
}
.title{
background-color: green;
text-align: left;
}
The only somewhat successful attempt at alignment was using "right:" in my CSS for the .more button, but it varies depending on the length of the title and sometimes exceeds the mat-card.
Any suggestions on how I can improve this alignment?