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

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:
Add display: flex to your outer div panel-footer [Check code below]
Remove the float and use text-align:right on the span for the button. [Check code below]
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/

Answer 2

Here's a version with proper HTML, and just enough CSS.
.panel-footer {
height: 70px;
border: solid;
position: relative;
}
.panel-footer button {
position: absolute;
right: .5em;
top: 50%;
transform: translate(0,-50%);
}
<div class="panel-footer">
<button>Save</button>
</div>

Answer 3

There's an accepted answer already with some flexbox magic, here's an answer without it and the extra wrapping span element.
.panel-footer{
position:relative;
height: 200px;
border:1px solid #000;
}
.panel-footer button.align-right{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}
<div class="panel-footer">
<button class="align-right" type="button">Save</button>
</div>

Answer 4

If you don't need your button to be box-modeled then you can remove float:right; and add text-align:right to parent.
But I agree with previous answer that flexbox is pretty good answer to all positioning doubts.
Solution with text-align:
https://jsfiddle.net/d1vrqkn9/8/
Solution with flexbox:
https://jsfiddle.net/d1vrqkn9/9/

Answer 5

line-height will do. Try different height values.
<span style="width:100%; line-height: ??px;" class="header-footer-item">

Answer 6

In my point of view, trying to achieve that with a float element is a dead end.
If your goal is to have an element at the right inside another element, you better use another solution, like table positionning.
You just have to create the 4 following css class (the row element is not used in this case) :
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.cell {
display: table-cell;
}
.cell-min-width {
display: table-cell;
width: 1%;
}
Then you just have to change your code for :
<div class="panel-footer table"> <!-- Position with table -->
<span style="width:100%;" class="header-footer-item">
<div class="cell"></div><!-- Empty cell to fill the left-->
<div class="cell-min-width"> <-- Cell with min width to fit the button -->
<button class="" type="button">Save</button>
</div>
</span>
</div>
https://jsfiddle.net/outch27/d1vrqkn9/366/