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>