将 2 个 Div 垂直居中另一个 Div

我有 2 个 div，我想将它们垂直居中在另一个 div 内。目前我有：

http://jsfiddle.net/5vpA3/1/ http://jsfiddle.net/5vpA3/1/

现在我明白这里发生了什么，但我希望左侧 div 在该容器内垂直对齐，右侧 div 相同。但它们是成对垂直排列的，而不是单独排列的。我尝试了各种方法，但似乎无法使其发挥作用。

现场演示 http://jsfiddle.net/5vpA3/22/

• Remove float: left from #left and #right.

• 相反，使用display: inline-block:

  #left, #right {
      display: inline-block;
      vertical-align: middle;
  }
  

• 由于使用display: inline-block，你必须处理空白问题 http://mattwilcox.net/archive/entry/id/1043/。我选择删除 HTML 之间的空格</div> and <div id="right">. See here http://jsfiddle.net/5vpA3/23/如果你不这样做会发生什么。删除空格确实是最简单的解决方法，但是还有其他方法 https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements/5078297#5078297.