将2个Divs垂直对中

Question

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

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

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

Answer 1

Live Demo

• 从float: left和#left移除#right。

• 请使用display: inline-block：

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

• 由于使用display: inline-block，您必须处理the whitespace issue。我选择在</div>和<div id="right">之间移除HTML中的空格。 See here如果你不这样做会发生什么。删除空格确实是最简单的解决方法，但是there are other ways。

Answer 2

喜欢这个吗？

演示：http://jsfiddle.net/5vpA3/25/

#container
{
    background-color: #FFFF00;
}
#left
{
    height: 150px;
    color: #FFFFFF;
    background-color: #0000FF;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 0px;
    top: 0px;
}
#right
{
    height: 80px;
    color: #FFFFFF;
    background-color: #FF0000;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 0px;
    top: 0px;
}