在另一个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来控制左侧和右侧的div需要改变div的顺序，并将center放在最后，这对我来说不可行。

如何使用CSS和此div结构实现以下效果：

- pmr

---

position:absolute 是一个选项吗？ - yckart

你会指定宽度吗？（像素、em、百分比，任何单位） - Edditoria

@Edditoria container 应该为100％，left 固定在 120px，right 应尽可能大，center 应占据其余的 100％。 - pmr

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*/
}

- Muthu Kumaran

---

但是它会破坏大图片的盒模型。（我自己解决了）脑子短路了！ - yckart

在 CSS 中，尝试移除 width 或者增加 #left 中的 width 大小。 - Muthu Kumaran

看起来不错。不幸的是，当中心 div 中的文本太长时会出现问题。我该如何强制它换行呢？ - pmr

为#center div设置一些宽度，如#center{width: 250px}。 - Muthu Kumaran

我已经更新了我的答案。您可以设置 width 或任何其他样式，并可以使用 CSS 进行控制。 - Muthu Kumaran

@MuthuKumaran 这很好，但设置宽度会防止中间的div进行缩放。当有更多空间可用时，我希望它尽可能地利用更多的空间。 - pmr