如何浮动:右键在中间垂直对齐

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这里如何垂直方向的中间对齐浮动无名高地的要素是什么？) -尽管父元素是然后在中间垂直对齐.

我已根据CSS添加行高度垂直对齐不适用于浮点数

最大的问题是 - 我该如何解决？我也有兴趣知道为什么使子元素(按钮)向右浮动使得父元素(span)不再在包含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"

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/

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>