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 彼此相邻并垂直对齐。对and div使用float: leftand需要更改 div 的顺序并在最后具有，这对我来说是不可能的。float: rightleftrightcenter

如何使用 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*/
}