Trouble aligning a button

HTML-CSS
1

I’m having trouble trying to get a button to align correctly.

31%20PM

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?

2

i {
font-size: 32px;
text-align:center;
}

Try above css, maybe it’s helpful, as far as I know.
try to put text-align: center; in your i tag css.

1 Like
3

Thanks for responding, but that didn’t seem to have any effect.

4

ok , i will try something else. And then tell you .

5

Can you send me your whole code ? so i can play with css and tell you .
And why don’t you use fontawsome trash icon , for that you need to integrate fontawsome CDN in header , then you can use and then text-align:center will work for it.
Thanks.

6

We have a “use material design icons first” directive.

7

ok , may be you can do one thing :

#your-div-id > li >button >i.material-icons{
position:relative;
top: 10px;
}

use above css separately.

8

I assume it’s using bootstrap, can you not use the align-self-center class.

1 Like