如何相对于图片定位div? [英] How can I position a div relative to an image?

问题描述

我有一幅图像，该图像可能会根据某些动作以及要在 img 标签上 position 的几个div改变其位置.

I have a an image that may change its position depending on certain actions and several divs that I want to position on the img tag.

简化代码如下:

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

为更好地理解，想象一下我有一个图像，该图像的中心周围有一个小方块，并且无论我将图像放置在什么位置，我都希望将foobar消息放置在图像方块中.有什么想法吗?

To better understand imagine I have an image with a small square somewhere around the center and I want the foobar message to be placed in the image square no matter where I position the image. Any ideas?

推荐答案

像这样的东西吗? http://jsfiddle.net/q0so8esf/

.imdesc {
    display: inline-block;
    vertical-align: middle;
    position: relative
}
.imdesc img {
    vertical-align: middle;
}
.imdesc p {
    text-align: center;
    background: #fc0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px;
    border-radius: 50px;
}

这篇关于如何相对于图片定位div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！