如何相对于图像定位 div？

Question

我有一个图像，它可能会根据某些操作和我想要position在img标签上的几个 div 改变其位置。

简化后的代码如下：

<div>
    <img src="someRandomImageUrl">
    <div>foobar</div>
</div>

为了更好地理解，想象一下我有一个在中心周围有一个小方块的图像，并且无论我将图像放在哪里，我都希望将 foobar 消息放置在图像方块中。有任何想法吗？

Answer 1

您可以尝试使用“forbar”的绝对定位：

<div class="container">
    <img class="image" src="http://lorempixel.com/400/400" />
    <div class="text">foobar</div>
</div>

.container {
    position: relative;
    display: inline-block;
}
.image {   }
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 5px;
    margin-top: -14px;
    margin-left: -50px;
    width: 100px;
    background-color: white;
    text-align: center;
}

JSFIDDLE 演示

您可以根据需要调整宽度和大小，以将文本准确居中或放置在您想要的位置。在display: inline-block为.container部队div.container不跨越页的整个宽度，并允许我们中心水平与绝对定位。