0

我正在制作带有添加/删除按钮的列表视图控件穿梭

类似于我发现的这个 VB（总）图像示例的控件：

基本视觉示例

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

首先，我尝试浮动来完成并排的uls 和按钮，但我无法将按钮垂直定位在容器的中心。

我研究了一个使用with的解决方案，如果我将它应用于所有容器，它就可以工作。但是，我希望s 与顶部对齐。inline-blockvertical-align: middleul

<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，或者如何正确垂直对齐这些按钮？

4

1 回答 1

1

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

于 2013-01-09T19:11:02.877 回答