How to create a responsive, vertically centered, two-line anchor-based button

Let’s say we need to use a anchor button (<a href=”” class=”button”>) for some reason. Legacy code in the current project, whatever. We want it tobe responsive and vertically centered (mobile view).

Standard simple code would be like:

ul.products li.product .button {
    display: inline-block;
    height: 48px;
    padding: 0 24px;
    font-size: 15px;
    line-height: 48px;
}

The problem can occur in mobile view when the button starts to get very short due to the shrinking viewport. Its label breaks in two and the last word disappears.

How to automatically double the label if needed on mobile? Use flex instead of block. Then you can easily set the justification and alignment. Remember the line height.

ul.products li.product .button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 20px;
}

How to Create a Responsive Vertically Centered Two-Line Anchor-Based Button