Question

我有两个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工作所需的绝对位置。

有什么想法吗？谢谢，

Answer 1

给你内心的div line-height:400px;

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

Answer 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>

Answer 3

使用

设置两个内部div的样式

position: relative; top: 0px;

除了你已经拥有的东西

Answer 4

添加

margin: auto;

以您想要居中的内容为div。为此，你必须在这个div上设置一个宽度。

也许

width: 100%;

应该这样做。

如何将div与绝对位置垂直对齐在一起？

4 个答案: