使用内联块和垂直对齐：中间和顶部，将父级内的子项与动态高度垂直对齐？

Question

我正在使用添加/删除按钮制作列表视图控制班车

类似于我发现的这个VB（粗略）图像示例的控件之类的东西：

但只添加>并删除中间垂直对齐的<按钮。

首先，我尝试浮动以完成并排ul和按钮，但我无法将按钮垂直放置在容器的中心。

我使用带有inline-block的{​​{1}}查看了solution，如果我将其应用于所有容器，则会有效。但是，我希望vertical-align: middle与顶部对齐。

ul

<div class="wrapper">
  <div class="inblock vert-top">
    <ul>
      <li>item list view</li>
      <li>...</li>
    </ul>
  </div>
  <div class="inblock vert-middle">
    <div>
      <button>&gt;</button>
    </div>
    <div>
      <button>&lt;</button>
    </div>
  </div>
  <div class="inblock vert-top">
    <ul>
      <li>item list view</li>
      <li>...</li>
    </ul>
  </div>
</div>

http://cssdesk.com/2ZCAe（类似于jsFiddle）

使用.wrapper { vertical-align: middle; } .inblock { display: inline-block; /* IE 7 hack */ *zoom:1; *display: inline; } .inblock.vert-top { vertical-align: top; } .inblock.vert-middle { vertical-align: middle; } 对第二个.inblock.vert-middle不起作用，当应用它时，它会将按钮容器发送到顶部。但是，使用ul显示第二个.inblock.vert-middle显示我想要的方式，但它没有意义。

如何修复CSS以便对第二个ul有意义，或者如何正确垂直对齐这些按钮？

Answer 1

也许这不是最优雅的解决方案，但是一张桌子可以完成这项工作。 vertical-align: middle应用于display: table-cell元素会导致内容垂直居中。