html - 在另一个 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*/
}