vertical-align：middle不起作用

The css property vertical-align: middle does not work in this example.

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

HTML:

HTML：

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

CSS:

CSS：

.float {
    float: right;
}

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

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

The span that is floating on the right is not vertically centered with respect to its containing div. How can I have it vertically centered?

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

The above code is in this fiddle.

上面的代码就是这个小提琴。

4 个解决方案

#1

You must wrap your element in a table-cell, within a table using display.

您必须使用display将元素包装在表格单元格中。

Like this:

喜欢这个：

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

and

和

.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;
}

Shown here: http://jsfiddle.net/e8ESb/7/

如图所示：http：//jsfiddle.net/e8ESb/7/

#2

Vertical align doesn't quite work the way you want it to. See: http://phrogz.net/css/vertical-align/index.html

垂直对齐并不像您希望的那样工作。请参阅：http：//phrogz.net/css/vertical-align/index.html

This isn't pretty, but it WILL do what you want: Vertical align behaves as expected only when used in a table cell.

这不是很好，但它可以做你想要的：垂直对齐仅在表格单元格中使用时表现如预期。

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

There are other alternatives: You can declare things as tables or table cells within CSS to make them behave as desired, for example. Margins and positioning can sometimes be played with to get the same effect. None of the solutions are terrible pretty, though.

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

#3

The answer given by Matt K works perfectly fine.

Matt K给出的答案非常好。

However it is important to note one thing - If the div you are applying it to has absolute positioning, it wont work. For it to work, do this -

然而，重要的是要注意一件事 - 如果您应用它的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>

#4

You should set a fixed value to your span's line-height property:

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

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

#1