logo标签列表

如何将一个使用absolute定位的div垂直居中并放置在另一个div之上？

jquerycsshtmlpositionz-index
4
我有两个 div，需要在另一个 div 中重叠放置。简单地说，我使用 z-index 并给它们 position:absolute。但是每个 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>

我有高度和宽度，表格单元格和垂直对齐方式为middle。这使得内容居中，但当我添加绝对定位以便z-index起作用时，就不再居中了。有什么建议吗？谢谢。
你是否对 position: relative 有意见？ - Tyler Crompton
图片的尺寸是400x400还是可变大小？ - Roko C. Buljan
图片的大小将始终是可变的，具体取决于从用户加载了什么。但是这两个图像必须重叠在一起，往往它们会比视图区域（它们所包含的div，即固定大小）小一些。 - iamface
你能制作一个演示来展示这个问题吗？例如可以使用 http://jsfiddle.net/ 和 http://www.dummyimage.com/。 - thirtydot
4个回答
4
这似乎正是我想要的。看起来在<img>标签上'垂直对齐，文本对齐和行高'都是必需的才能使其工作？我的图像将是内联<svg>，它们似乎不起作用。也许这就是我的问题所在...谢谢您！不过我会用这个示例解决它。我甚至从未见过这个jsfiddle.net，但很喜欢它 :) - iamface
由于某些原因，这似乎与内联<svg>元素不同于<img>:/。 - iamface
2
您可以在第二个 div 中添加一个额外的 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>
这是最好的选择，似乎也是唯一能够使内联<svg>图形正常工作的方法。line-height可以与图像标签一起使用，但不能与svg一起使用。创建第二个div会分割索引层，并对齐以使其按预期工作。 - iamface
1

对两个内部div进行样式设置

position: relative; top: 0px;

除了你已经拥有的之外

这两个div被堆叠在一起，而不是重叠:/ - iamface
哦，我的错误，我以为那是你想要的。抱歉！那么你是想让它们彼此完全重叠吗？一个完全覆盖另一个？ - Ryan Casey
是的，它们实际上是带有大量透明度的SVG文件，这被用来创建一种效果。 - iamface
在这种情况下，我会选择David Nguyen的解决方案，它似乎符合您的要求。 - Ryan Casey
0

添加

margin: auto;

将内容想要居中的 div 元素返回。为了使其正常工作，您必须在该 div 上设置宽度。

或许

width: 100%;

应该可以解决问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接