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/

如果我从按钮中删除浮动：它可以正常工作,但我想要它在右边.

如果我将header-footer-item从inline-block更改为inline,则浮动按钮会在其包含的元素上方呈现,我认为这违反了规则:(在此处接受的答案中为#4) – 尽管父元素是垂直的在中间对齐.

我按照CSS Vertical align does not work with float增加了线高

最大的问题是 – 我该如何解决？我也有兴趣知道为什么使子元素(按钮)向右浮动使得父元素(span)不再在包含div中垂直对齐(但仅当它是内联块,而不是内联时). …最后,浮动箱的外部顶部是否高于其内部顶部的“违反规则”(https://www.w3.org/TR/CSS21/visuren.html#float-rules,#4)？ …如果页眉 – 页脚项是内联的,它显然是明确的.

有很多问题关于垂直对齐你认为他们会为css做的事情“认真地,垂直地对齐这个东西 – 无论如何,没有抱怨,只是这样做：sudo force vertical-align：middle！important or important or I ‘为你而来“