DIV位于父级DIV内部的图像之上

Question

我正在制作一个动态生成的照片库，照片尺寸会不同，每张照片都会有一个DIV重叠图像，与图像在同一基线上，将包含“用户菜单”项目相关到那张照片。 （下面的蓝框）

我无法将“用户菜单”div置于图像顶部。这个div需要居中，与图像在同一基线上，无论图像大小如何（不确定如何使用绝对定位）

我已经看到了使用CSS background-image的建议，但我认为这不是动态生成内容的好选择。我已经看到了绝对定位图像的建议，除了父DIV折叠并使页面上的其他项目定位成噩梦之外，这确实有效。我已经阅读了很多关于stackoverflow的帖子，但我没有找到解决或解决这个特定问题的帖子。

这是我想要完成的一个例子。蓝色框是用户菜单，应该在图像的基线上居中。

我已经尝试了两件事，这似乎不适用于父DIV，因为图像从流中移除并且间距在父DIVS崩溃时被搞砸了。 http://jsfiddle.net/3d3m1x9k/

CSS

.box1{
    position:relative;
    display:inline-block;
    background-color:orange;
    border: 4px solid black;

}

.box2{
   position:relative;
   top:80px;
   left:80px;
   margin: 0 auto;
   padding: 5px;
   background-color: red;
   border: 2px solid red;
}

HTML

<div class="box1">
    <img src="http://i60.tinypic.com/33n947o.jpg" style="position:absolute;"/>
    <div class="box2">box</div>
</div>
<div class="box1">
    <img src="http://i60.tinypic.com/33n947o.jpg" style="position:absolute;"/>
    <div class="box2">box</div>
</div>

这样做效果更好，但除非我使用javascript来定位“用户菜单”DIV，否则我无法让盒子正确居中，因为图像宽度是动态的。 （javascript不是不可能的，只是试图首先找到使用CSS的正确方法）

https://jsfiddle.net/vv5rtkqz/

CSS

.box1{
    position:relative;
    display:inline-block;
    background-color:orange;
    border: 2px solid black;

}

.box2{
   position:absolute;
   bottom: 0px;
   margin: 0 auto;
   padding: 5px;
   background-color: red;
   border: 2px solid red;
}

HTML

<div class="box1">
    <img src="http://i60.tinypic.com/33n947o.jpg"/>
    <div class="box2">Center Me</div>
</div>
<div class="box1">
    <img src="http://i60.tinypic.com/33n947o.jpg"/>
    <div class="box2">Center Me</div>
</div>

Answer 1

使用绝对定位和2D变换可以简单地开始。

.container {
  position: relative;
  display: inline-block;
}
.info {
  background: black;
  color: white;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowarp;
}

<div class="container">
  <img src="http://shakacity.com/sites/default/files/dog_0.jpg" alt="" />
  <div class="info">Contains the user controls</div>
</div>