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

以上代码位于this fiddle。

Answer 1

您必须使用table-cell将{@ 1}}内的元素包裹在table内。

像这样：

display

和

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

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

Answer 2

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

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

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

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

Answer 3

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

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

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

vertical-align：middle不起作用

4 个答案: