如何获得浮动：右键垂直居中对齐

我只是无法获得课程按钮align-right垂直居中对齐。

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;
}

这是jsfiddle：https://jsfiddle.net/d1vrqkn9/2/ https://jsfiddle.net/d1vrqkn9/2/

如果我删除float:right从按钮上，它可以工作，但我希望它在右侧。

如果我改变header-footer-item from inline-block to inline然后浮动按钮呈现在其包含元素之上，我认为这是违反规则的：（此处接受的答案中的#4如何垂直居中对齐未知高度的浮动元素？ https://stackoverflow.com/questions/12557897/how-to-vertically-middle-align-floating-elements-of-unknown-heights) - 尽管父元素在中间垂直对齐。

我已经添加了行高CSS 垂直对齐不适用于浮动 https://stackoverflow.com/questions/11718134/css-vertical-align-does-not-work-with-float

最大的问题是 - 我该如何解决它？我也有兴趣知道为什么使子元素（按钮）向右浮动会使父元素（跨度）不再在包含的 div 中垂直对齐（但前提是它是inline-block, not inline）。 ……最后，这不是‘违反规则’吗（https://www.w3.org/TR/CSS21/visuren.html#float-rules https://www.w3.org/TR/CSS21/visuren.html#float-rules, #4) 浮动框的外顶部高于其包含块的顶部？ ...这显然是如果header-footer-item is inline.

关于垂直对齐的东西有很多问题，你会认为他们会为“说真的，垂直对齐这个东西 - 无论如何，没有抱怨，就这样做：sudo force vertical-align:middle !important or I'm coming for you"

最干净的方法是使用flex像这样：

1. Add display: flex到你的外部 divpanel-footer[检查下面的代码]

2. 取下浮子并使用text-align:right在按钮的跨度上。 [检查下面的代码]

3. Add align-self: center到内跨度。 [检查下面的代码]

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;
}

js小提琴： https://jsfiddle.net/d1vrqkn9/4/ https://jsfiddle.net/d1vrqkn9/4/