在图像顶部的DIV DIV

我正在处理动态生成的照片库，照片大小不同，每张照片都会有一个与图像重叠的DIV，与基准线相同图像，其中将包含与该照片相关的“用户菜单”项目。（下面的蓝色框）在图像顶部的DIV DIV

我无法让“用户菜单”div定位在图像顶部。这div需要居中，并在与图像相同的基线，无论图像大小（不知道如何做到绝对定位）

我见过使用CSS背景图像的建议，但我不知道用动态生成的内容看不到这是一个很好的选择。我已经看到了一个建议，绝对定位图像，除了父DIV崩溃并且使页面上的其他项目定位为噩梦外，这种方法可行。有很多帖子我已经通过了stackoverflow，但我还没有找到解决或解决这个特定问题的文章。

这是我试图完成的一个例子。蓝色框是用户菜单，并且应该在图像的基线上以为中心。

Example

我已经试过两件事情，这似乎并没有因为图像是从流去除和间距被搞砸了与父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>

来源

2015-04-05 dangel

你可以得到一个通过使用绝对定位和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>

来源

2015-04-05 19:02:52 Nit

在图像顶部的DIV DIV

回答

相关问题