Question

我有一个容器div，图像叠加在它上面。

我想将这个容器div放在一个基本的popin中。我确信它与我在CSS中使用的叠加方法有关，但我无法弄明白。如何将容器dev置于popin中心？

编辑：这些块中有几个是在线放置的。

CSS和HTML如下：

＆＃13;

.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; left: 0; }

.popin{
  background:#fff;
  padding:15px;
  box-shadow: 0 0 20px #999;
  border-radius:2px;
}

#underlay1 {
  width: 320px;
  height: 320px;
  position: relative;
}

#underlay2 {
  width: 320px;
  height: 320px;
  position: relative;
}

＆＃13;

<div class="row">
  <div class="col-md-4 col-sm-6 popin">
    <div class="containerdiv">
      <div id="underlay1"></div>
      <img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">		
    </div>
  </div>

  <div class="col-md-4 col-sm-6 popin">
    <div class="containerdiv">
      <div id="underlay2"></div>
      <img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">		
    </div>
  </div>
</div>

＆＃13;

Underlay正在从API接收图像。 overlayimage.gif是放在顶部的另一个图像。

Answer 1

从float: left;移除.containerdiv，将text-align: center;提交给.popin即可解决您的问题。

您可以按照以下方式将绝对div居中：

left: 50%; 
transform: translate(-50%, 0px);

http://jsfiddle.net/5z2k1b1r/

修改

根据您的预期输出margin: 0 auto;使用#underlay。

检查Fiddle

将图像居中放置在顶部的图像居中

1 个答案: