I’m having trouble trying to get a button to align correctly.
I want the baseline of the delete button to line up vertically with the text. I’ve tried setting margin-bottom, and padding-bottom to 0 on the button. but it doesn’t seem to have any impact on where the button is positioned virtually.
This is for an angular app. the html itself is pretty easy
<div id="9656d211-99ec-448e-b0ef-543e36ceff88" class="col-12"
*ngFor="let item of section.data; let index = index;">
<li class="mdc-list-item d-flex flex-column-reverse align-items-md-stretch">
<span>{{item.historyitem || item}}</span>
<button class="mat-button mat-primary delete-button align-self-end" (click)="remove(section, item)"><i class="material-icons">delete_forever</i></button>
</li>
</div>
The CSS I’ve experimented with
.mat-button .mat-primary .delete-button {
padding-bottom: 0;
margin-bottom: 0;
i {
font-size: 32px;
}
}
Any other ideas on what I should try?