垂直对齐不适用于浮动元素

Question

您好我正试图让2个元素垂直对齐。

<div>
  <h1>heading</h1>
  <nav>
    <ul>LIs...</ul>
  </nav>
</div>

我希望h1向左浮动，导航向右浮动。但垂直对齐对浮动元素不起作用:(他们是否可以解决这个问题？

修改： 使用表格单元解决方案，h1失去其内联紧密尺寸。有什么方法吗？

我尝试过宽度：自动。

Answer 1

试试这个：

HTML：

<div class="row">
  <h1 class="cell">heading</h1>
  <nav class="cell">
    <ul>LIs...</ul>
  </nav>
</div>

CSS：

.row{display:table-row;}
.cell{display:table-cell;
vertical-align: middle;
border: 1px solid #CCC;}

Fiddle here.