vertical-align:middle不起作用

Question

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.我怎样才能让它垂直居中？

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

Answer 1

您必须table-cell在table使用中将元素包装在a 中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/

Answer 2

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

这不是很好,但它会做你想要的:垂直对齐只有在表格单元格中使用时才会按预期运行.

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

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

Answer 3

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

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