Html 位于图像顶部的DIV，都位于父DIV的内部

我正在制作一个动态生成的照片库，照片大小不同，每张照片都有一个DIV，与图像重叠，位于与图像相同的基线上，其中包含与该照片相关的“用户菜单”项。（下面的蓝色方框）

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

我已经看到了使用CSS背景图像的建议，但我不认为这是动态生成内容的好选择。我看到一个建议，绝对定位图像，这确实有效，但父DIV崩溃，使页面上其他项目的定位成为一场噩梦。我读过很多关于stackoverflow的帖子，但我还没有找到一篇能够解决这个问题的帖子

这是我试图实现的一个例子。蓝色框是用户菜单，应该位于图像基线的中心

我试过两种方法，这似乎对父div不起作用，因为图像从流中移除，并且随着父div崩溃，间距变得混乱

CSS

HTML

HTML

居中
居中

通过使用绝对定位和2D变换，您可以获得一个简单的开始

.container{
位置：相对位置；
显示：内联块；
}
.info{
背景：黑色；
颜色：白色；
位置：绝对位置；
底部：0；
左：50%；
转化：translateX（-50%）；
空白：nowarp；
}

包含用户控件

.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;
}

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

.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;
}

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