Html 垂直对齐不'；不能在浮动元素上工作

你好，我正在尝试使两个元素垂直对齐

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

标题
LIs…

我希望h1向左浮动，导航向右浮动。但是垂直对齐对浮动元素不起作用：（它们是解决这个问题的方法吗

编辑： 使用表格单元格解决方案，h1失去了其内联紧尺寸。有没有办法解决这个问题

我试过宽度：自动。

试一下：

HTML:

试试这个：

HTML:

---

使用

display:inline block；vertical align:middle

，instad of

float

。令人惊讶的是，它能起作用。@RobertHarvey我不确定这个问题如何与链接问题重复。这个问题指的是垂直对齐两个元素，而链接问题是关于垂直定位一个元素元素。谢谢，这是我最初的尝试，但是这两个元素并排结束，而不是左边右边的一个：|啊。嗯……我想不出除了

之外的任何东西来解决这个问题（由于兼容性差，我不使用

显示：table-*

CSS）似乎修复了它。鉴于H1 1%的宽度，将ul浮动在导航右侧。使用

显示：内联块；垂直对齐：中间
，安装
浮动
。令人惊讶的是，它工作了。@RobertHarvey我不确定这个问题如何与链接问题重复。这个问题指的是用respec垂直对齐两个元素t相互关联，而链接的问题是关于在页面上垂直定位一个元素。谢谢，这是我最初的尝试，但是这两个元素并排结束，而不是一个在左边，一个在右边：|啊。嗯……我想不出除了
之外的任何方法来解决这个问题（由于兼容性不好，我没有使用
display:table-*
CSS）似乎修复了它的问题。考虑到H1 1%的宽度，ul在导航右侧浮动。
<div class="row">
  <h1 class="cell">heading</h1>
  <nav class="cell">
    <ul>LIs...</ul>
  </nav>
</div>

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