cssangularangular-materialmaterialbutton

How can I align vertically a smaller material float button?

I have the following code to create some float buttons:

    <div class='history-buttons__container'>
        <button mat-mini-fab>all</button>
        <button mat-mini-fab>1y</button>
        <button mat-mini-fab>6m</button>
        <button mat-mini-fab>30d</button>
    </div>

.history-buttons__container > button{
    display: block;
    margin-bottom: .5rem;
    width: 2rem;
    height: 2rem;
}

Which yields to the following:

enter image description here

If I removed the width and height they look ok:

enter image description here

As those elements are in an diplay: block to have them stacked vertically, I can not use vertical-align. What can I do to center the text inside the item while I make the icons smaller?

Solution

  • With flex you can do it easily

    .history-buttons__container {
    display:flex;
    flex-direction:column;
}
.history-buttons__container > button{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .5rem;
    width: 2rem;
    height: 2rem;
}
    <div class='history-buttons__container'>
        <button mat-mini-fab>all</button>
        <button mat-mini-fab>1y</button>
        <button mat-mini-fab>6m</button>
        <button mat-mini-fab>30d</button>
    </div>