html - 使用 inline-block 和 vertical-align : middle and top? 垂直对齐父级内部的子级与动态高度

Question

我正在制作一个带有添加/删除按钮的 ListView 控件

类似于我发现的这个 VB(总)图像示例的控件:

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

首先我尝试通过 float 实现并排 ul s 和按钮，但我无法将按钮垂直放置在容器的中心。

我查看了 solution使用 inline-block与 vertical-align: middle ，如果我将它应用于所有容器，它就会起作用。但是，我想要 ul s 与顶部对齐。

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

.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;
}

http://cssdesk.com/2ZCAe (类似于jsFiddle)

使用 .inblock.vert-middle不适用于第二个ul ，当它被应用时，它会将按钮容器发送到顶部。但是，使用 .inblock.vert-middle第二个ul显示我想要的方式，但这没有意义。

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

Answer 1

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