How do i align multiple elements in mat-card-content angular css html

Question

i am trying to right-align and center the button vertically within the mat-card-content, but it is not working properly and if i try to add more divs or change my html it looks even worse or does not align properly. My title should be left-aligned and also vertically centered as it is right now.

(I used ugly background-colors to understand what it does whenever I change something)

<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 thing I tried that somewhat worked how i wanted was using right: for my.more button in my css but it is not consistent depending on how long my title is or at some point exceeds the mat-card

Any other ideas on how I could fix this?

Answer 1

You can do what you are trying to do with flex

Try something like this

I also made a quick Stackblitz too https://stackblitz.com/edit/angular-ivy-mvecpg

You might want to have a read of the custom theming https://material.angular.io/guide/theming-your-components

 .recipe { display: flex; flex-direction: column; width: 400px; }.recipe__card { background-color: #d4d4d4; border-radius: 4px; box-shadow: 0 4px 2px -2px #ccc; padding: 8px; margin-bottom: 12px; }.recipe__card-content { padding-bottom: 0;important: padding-top; 0:important; display: flex; justify-content: space-between; align-items: center; background-color: green; padding. 4px 8px: };recipe__title { font-weight. bold: };recipe__more-btn { background: red; border: none; margin: 8px; }

 <section class="recipe" *ngFor="let recipe of cookbook"> <mat-card class="recipe__card"> <mat-card-content class="recipe__card-content"> <span class="recipe__title">{{recipe.title}}</span> <button mat-icon-button [matMenuTriggerFor]="menu" class="recipe__more-btn"> <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> </section>