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 { {3}}） - 尽管父元素在中间垂直对齐。

我根据How to vertically middle-align floating elements of unknown heights?

添加了行高

最大的问题是 - 我该如何解决？我也有兴趣知道为什么使子元素（按钮）向右浮动使得父元素（span）不再在包含div中垂直对齐（但仅当它是inline-block时，而不是{{1 }}）。 ...最后，浮动框的外部顶部高于其包含块的顶部是不是“违反规则”（CSS Vertical align does not work with float，＃4）？ ......如果inline是header-footer-item，那显然是这样。

有很多关于垂直调整事物的问题，你认为他们会做出一个css“认真地，垂直地对齐这个东西 - 无论如何，没有抱怨，只需这样做：inline”

Answer 1

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

将display: flex添加到您的外部panel-footer [检查以下代码]
移除浮动并在按钮的范围上使用text-align:right。 [检查以下代码]
将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>

Answer 3

如果您不需要对按钮进行框建模，则可以删除float:right;并将text-align:right添加到父级。

但我同意之前的回答，即flexbox对所有定位疑问都是非常好的答案。

使用text-align的解决方案： https://jsfiddle.net/d1vrqkn9/8/

使用flexbox解决方案： https://jsfiddle.net/d1vrqkn9/9/

Answer 4

已经接受了一些Flexbox魔法的答案，这里是没有它的答案和额外的包裹范围元素。

.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 5

行高会做。尝试不同的身高值。

<span style="width:100%; line-height: ??px;" class="header-footer-item">

Answer 6

在我看来，尝试使用float元素来实现这一目标是徒劳的。如果您的目标是在另一个元素的右边放置一个元素，则最好使用其他解决方案，例如表格定位。

您只需创建以下4个CSS类（在这种情况下不使用row元素）：

.table {
    display: table;
    width: 100%;
}

.row {
    display: table-row;
    width: 100%;
}

.cell {
    display: table-cell;
}

.cell-min-width {
    display: table-cell;
    width: 1%;
}

然后，您只需要更改以下代码：

<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/

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

6 个答案: