在另一个div中垂直居中3个div

Question

我在容器中有三个div：

<div id="container">
  <h2>Heading</h2>

  <div id="left">
    An image goes here.
  </div>

  <div id="center">
    Lorem ipsum whatever.
  </div>

  <div id="right">
    <ul>
      <li>Example</li>
      <li>Example</li>
      <li>Example</li>
    </ul>
  </div>
</div>

我希望三个内部div彼此相邻并对齐 垂直。将float: left和float: right用于left和 right div需要更改div的顺序并且center为。{ 结束，这对我来说是不可能的。

如何使用CSS和div结构实现以下功能：

Answer 1

在css中，使用display:inline-block垂直对齐

此处演示：http://jsfiddle.net/muthkum/BEHdu/1/

#left, #center, #right{
    display:inline-block; 
    *display:inline; /*IE7 fix*/
    zoom:1;
    padding:5px; 
    border: 1px solid #000; 
    vertical-align:middle;
}
#left{
    width:50px; /*Remove or Increase the width if needed*/
}

#center{
    /*SET WIDTH HERE*/
}

#left{
    /*SET WIDTH HERE*/
}