How to get float:right button to vertically align in the middle

Question

I just can't get the button with class align-right to vertically align in the middle.

HTML:

<div class="panel-footer">
    <span style="width:100%;" class="header-footer-item">  
        <button class="align-right" type="button">Save</button>
    </span>    
</div>

CSS:

.panel-footer {
    height: 70px;
    vertical-align: middle;
    border: solid;
}

.header-footer-item {
    display: inline-block;
    line-height: 70px;
    border: solid red;

}

.align-right {
    float: right;
}

.align-middle {
  vertical-align: middle;
}

Here's the jsfiddle: https://jsfiddle.net/d1vrqkn9/2/

If I remove float:right from the button, it works, but I want it on the right.

If I change header-footer-item from inline-block to inline then the floated button renders above its containing element, which I thought was against the rules: (#4 in the accepted answer here How to vertically middle-align floating elements of unknown heights?) - although the parent element is then vertically aligned in the middle.

I have added line heights as per CSS Vertical align does not work with float

The big question is - how do I fix it? I'm also interested to know why making a child element (the button) float right makes the parent element (the span) no longer vertically align in the containing div (but only if it is inline-block, not inline). ...and finally, isn't it 'against the rules' (https://www.w3.org/TR/CSS21/visuren.html#float-rules, #4) for a floating box's outer top to be higher than the top of its containing block? ...which it clearly is if header-footer-item is inline.

There are so many questions about vertically aligning things you'd think they'd make a css for "Seriously, vertically align this thing - no matter what, no complaints, just do it: sudo force vertical-align:middle !important or I'm coming for you"

Answer 1

The cleanest way to do that is to use flex like this:

1. Add display: flex to your outer div panel-footer [Check code below]

2. Remove the float and use text-align:right on the span for the button. [Check code below]

3. Add align-self: center to the inner span. [Check code below]

---

For 1:

.panel-footer {
    height: 70px;
    border: solid;
    display:flex;
}

For 2:

.header-footer-item {
        text-align: right;
}

For 3:

.header-footer-item {
    align-self: center;
}

jsFiddle: https://jsfiddle.net/d1vrqkn9/4/