如何在圆形 div 中将 2 个图像居中，同时将它们重叠？答案

【问题标题】：How do I center 2 images in a circular div while also overlapping them?如何在圆形 div 中将 2 个图像居中，同时将它们重叠？
【发布时间】：2015-10-31 08:49:26
【问题描述】：

我一直在搞乱引导模板...非常标准的行，包含 3 个项目。

我已将每个行项目变成具有圆形背景的 div。现在，我正在尝试拍摄 2 张图像（以便我可以为它们设置动画）并将它们放在 div 中。

我找到了一些破解它的方法...但我想知道最好的方法是什么？

我希望能够控制分层并确保它们始终垂直居中。

其中一个的绝对定位现在使另一个居中...

HTML

<div class="col-lg-4">
            <div class="feature-icon">
                <div id="phone">

                    <img class="behind" src="img/svg/phone.svg" width="40">
                    <img src="img/svg/pocket.svg" width="70">
                </div>
            </div>

CSS

img.behind {
z-index: 0;
position: relative;
left: 20px;
top: 40px;
}

这就是它现在的样子。

【问题讨论】：

您能发布您当前的代码吗？
寻求代码帮助的问题必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
你真的需要展示一些代码。你的 html 是什么样的？ CSS？这一切都取决于此。
很抱歉。这是我的第一篇 Stack Overflow 帖子。

标签： html css centering

【解决方案1】：

我真的不明白你的问题。但是对于使用绝对位置完全控制容器内的 DIV 是使父容器相对。

HTML

<div id="parent-container">
     <div id="animated-object1" class="object"></div>
     <div id="animated-object2" class="object"></div>
     <div id="animated-object3" class="object"></div>
</div>

CSS

#parent-container{
   position:relative;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin: auto;
   width:100%;
   height:500px;
    border:1px solid red;
}

.object{
   position: absolute;
    width:50px;
    height:50px;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin: auto;
    border: 1px solid green;
}
#animated-object1{
  left:300px;
  border:1px solid blue;
}

JavaScript - jQuery - onclick- 动画语法

$('#parent-container').on('click', function(){
    $('#animated-object1').animate({
      left: "0px"
    })
})

http://jsfiddle.net/9Lufvdfn/4/

【讨论】：