DIV 在图像之上，都在父级内部 DIV

Question

我正在处理一个动态生成的照片库，照片大小不同，每张照片都有一个 DIV 与图像重叠，在与图像相同的基线上，将包含"user menu" 项与该照片相关的项。（下图蓝框）

我无法将 "user menu" div 定位到图像顶部。这个 div 需要居中，并且与图像在同一基线上，无论图像大小如何（不确定如何使用绝对定位来做到这一点）

我看到了使用 CSS 背景图像的建议，但我认为这不是动态生成内容的好选择。我看到了绝对定位图像的建议，这确实有效，除了父 DIV 崩溃并使页面上的其他项目定位成为一场噩梦。我在 Whosebug 上通读了很多 post，但我还没有找到解决或解决这个特定问题的方法。

这是我正在尝试完成的示例。蓝色框是用户菜单，应该居中在图像的基线上。

我已经尝试了 2 件事，这似乎不适用于父 DIVs，因为图像从流中删除，并且随着父 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 来定位 "user menu" 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>

DIV 在图像之上，都在父级内部 DIV

DIV on top of image, both inside of parent DIV

html

css

css-position