4

我有两个 div，我需要将它们放在另一个 div 中。很简单，我使用 z-index 并给它们位置：绝对值。但是每个 div 的内容都需要垂直对齐。当我将它们放在顶部时，它们不会垂直居中。

有没有办法混合这两种风格来做到这一点？

或者这可能以某种方式使用 jQuery 吗？

这基本上就是我所拥有的。

<div style="width:100%">
  <div style="height:400; width:400; display:table-cell; vertical-align:middle; z-index:0; position:absolute;"><img></div>
  <div style="height:400; width:400; display:table-cell; vertical-align:middle; z-index:1; position:absolute;"><img></div>
</div>

我有高度和宽度，表格单元格和垂直对齐作为中间。这使内容居中，直到我添加了 z-index 工作所需的绝对位置。

有任何想法吗？谢谢，

4

4 回答 4

4

给你的内部 divline-height:400px;

http://jsfiddle.net/2DXPg/1/

于 2012-05-22T21:57:12.040 回答
2

您可以在第二个中添加一个额外的 div：http: //jsfiddle.net/MDJDx/

<div style="width:100%">
  <div style="height:400px; width:400px; display:table-cell; vertical-align:middle; z-index:0; position:relative;top:0;">img</div>
  <div style="height:400px; width:400px; z-index:1; position:absolute; top:0">
    <div style="height:400px; width:400px; display:table-cell; vertical-align:middle; position:relative;">img</div>
  </div>
</div>
于 2012-05-22T22:03:56.533 回答
1

设置两个内部 div 的样式

position: relative; top: 0px;

除了你已经拥有的

于 2012-05-22T21:41:03.857 回答
0

添加

margin: auto;

到包含您想要居中的内容的 div。为此，您还必须在此 div 上设置宽度。

也许

width: 100%;

应该做的伎俩。

于 2012-05-22T21:39:12.437 回答