垂直对齐：中间不起作用答案

【问题标题】：vertical-align: middle doesn't work垂直对齐：中间不起作用
【发布时间】：2015-08-02 02:01:29
【问题描述】：

css 属性vertical-align: middle 在本示例中不起作用。

HTML：

<div>
  <span class='twoline'>Two line text</span>
  <span class='float'>  Float right  </span>
</div>

CSS：

.float {
    float: right;
}

.twoline {
    width: 50px;
    display: inline-block;
}

div {
    border: solid 1px blue;
    vertical-align: middle;
}

浮动在右侧的span 相对于其包含的div 不是垂直居中的。我怎样才能让它垂直居中？

以上代码在this fiddle。

【问题讨论】：

标签： html css

【解决方案1】：

您必须将元素包装在 table-cell 中，在 table 中使用 display。

像这样：

<div>
  <span class='twoline'>Two line text</span>
  <span class='float'>Float right</span>
</div>

和

.float {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}
.twoline {
    width: 50px;
    display: table-cell;
}
div {
    display: table;
    border: solid 1px blue;
    width: 500px;
    height: 100px;
}

此处显示：http://jsfiddle.net/e8ESb/7/

【讨论】：

这工作得很好没有设置一个固定的高度：jsfiddle.net/e8ESb/9（你的解决方案意味着DIV必须有一个固定的高度才能工作...... )
额外的高度只是让你更容易看到元素确实是垂直居中的，仅此而已。我认为我的解释就足够了。
父母必须有display: table吗？因为我在没有它的情况下在 FF 中测试了这个场景并且它有效。
根据规范display: table; 使元素的行为类似于<table> 和defines a block-level box。因此，只要父级是块级框元素，它可能无需将父级显式声明为display: table; 即可工作，但从语义上讲，将表格元素包装在表格中是正确的。
通常当我用谷歌搜索时，我意识到我真的只想在我想要居中的元素上使用margin: auto;。在我看来，通常比处理表格单元要好得多。

【解决方案2】：

垂直对齐并不完全按照您想要的方式工作。见：http://phrogz.net/css/vertical-align/index.html

这并不漂亮，但它会做你想做的事：只有在表格单元格中使用时，垂直对齐才会按预期运行。

http://jsfiddle.net/e8ESb/6/

还有其他选择：例如，您可以在 CSS 中将事物声明为表格或表格单元格，以使它们按需要运行。有时可以使用边距和定位来获得相同的效果。不过，没有一个解决方案是非常糟糕的。

【讨论】：

这与“非常非常困难”相去甚远。您只需添加 CSS 显示属性即可呈现垂直对齐工作所需的类似表格的结构。
好的，至少在这种情况下，它并不难。我已经把它拿出来了。不过，在其他情况下，它会很快变得比您预期的要困难。

【解决方案3】：

您应该为 span 的 line-height 属性设置一个固定值：

.float, .twoline {
    line-height: 100px;
}

【讨论】：

当容器高度固定时，这可能是一个整洁的解决方案 - 前提是文本内容绝对绝对不会换行。

【解决方案4】：

Matt K 给出的答案非常好。

但重要的是要注意一件事 - 如果您应用它的 div 具有绝对定位，则它不会工作。为了让它工作，这样做 -

<div style="position:absolute; hei...">
   <div style="position:relative; display: table-cell; vertical-align:middle; hei..."> 
      <!-- here position MUST be relative, this div acts as a wrapper-->
      ...
   </div>
</div>

【讨论】：