DIV on top of image, both inside of parent DIV - html

Question

I'm working on a photo gallery that is dynamically generated, photos will be different sizes, and each photo will have a DIV overlapping the image, on the same baseline as the image, that will contain "user menu" items related to that photo. (blue box below)
I'm having trouble getting the "user menu" div to position on top of the image. This div needs to be centered, and on the same baseline as the image, regardless of image size (not sure how to do this with absolute positioning)
I've seen suggestions to use CSS background-image, but I don't see that as a good option with dynamically generated content. I've seen a suggestion to position the image absolutely, and this does work except the parent DIV collapses and makes positioning other items on the page a nightmare. There are quite a few post that I've read through on stackoverflow, but I haven't found one that addresses or solves this particular issue.
This is an example of what I'm trying to accomplish. The blue boxes are the user menus, and should be centered on the baseline of the images.
I've tried 2 things, this doesn't seem to work with parent DIVs since the images are removed from flow and spacing gets screwed up as the parent DIVS collapse. 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>
This works better, but I can't get the box to center properly unless I use javascript to position the "user menu" DIV since the image widths are dynamic. (javascript isn't out of the question, just trying to first find a proper way using 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

You can get a simple start by using absolute positioning and a 2D transform.
.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>