使用inline-block和vertical-align：中間和頂部將父級內的子級與動態高度垂直對齊。

Question

我正在使用添加/刪除按鈕制作列表視圖控件

我發現類似於此VB（總圖）圖像示例的控件：

但是只有添加>和刪除<按鈕在中間垂直對齊。

首先，我嘗試浮動以完成並排的ul和按鈕，但是我無法將按鈕垂直放置在容器的中央。

我研究了使用inline-block和vertical-align: middle的解決方案 ，如果將其應用於所有容器，該解決方案 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>

.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不起作用，當應用第二個ul時，它將按鈕容器發送到頂部。 但是，對於第二個ul使用.inblock.vert-middle顯示我想要的方式，但這沒有任何意義。

如何修復CSS，使其對第二個ul有意義，或者如何正確垂直對齊這些按鈕？

Answer 1

也許這不是最優雅的解決方案，但是一張桌子可以解決問題。 vertical-align: middle應用於display: table-cell元素將導致內容垂直居中。