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

Question

我只是无法让按钮类 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/

如果我从按钮中删除 float:right ，它会起作用，但我希望它在右边。

如果我将 header-footer-item 从 inline-block 更改为 inline 浮动按钮呈现在其包含元素之上，我认为这是违反接受规则的：#4在这里回答 How to vertically middle-align floating elements of unknown heights? ) - 尽管父元素然后在中间垂直对齐。

我添加了行高，因为 CSS 垂直对齐不适用于浮动

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

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

原文由 WillyC 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

1. 添加 display: flex 到你的外部 div panel-footer [检查下面的代码]

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

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

---

对于 1：

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

对于 2：

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

对于 3：

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

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

原文由 AndrewL64 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个具有适当 HTML 和足够 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>

原文由 junkfoodjunkie 发布，翻译遵循 CC BY-SA 3.0 许可协议