How can I position a div relative to an image?

问题

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.

The simplified code is as follows:

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

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?

回答1:

Somthing like this? 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;
}

回答2:

You could try this using absolute positioning for "foorbar":

<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 DEMO

You can adjust the width, and magins as needed to center or position the text exactly where you want it. The display: inline-block for the .container forces the div.container to not span the entire width of the page and allow us to center horizontally with absolute positioning.

回答3:

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

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

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

.container-wrap {
    position: relative;
    display: inline-block;
    margin:12px 0;
}

.text-center, .text-top, .text-bottom {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 5px;
    margin-top: -14px;
    margin-left: -50px;
    width: 100px;
    background-color: white;
    text-align: center;
}
.text-top{margin-top:0; top:0;}
.text-bottom{top:auto; bottom:0;}

回答4:

You can try using translateX(-50%) along with necessary margin-left or margin-right to center the element you wish to center with respect to an image.

#botCaptionImage{
    position: absolute;
    margin-top: 300px; /*usually height of image plus some offset*/
    margin-left: -150px;
    transform: translateX(-50%); /*Shifts half the width 
                                 of caption past the margin-left reference point*/
}

Refer to this page on using translateX

回答5:

Here is HTML code. Giving u example.

     <div class="background" 
   style="background-image: url('../../img/Australia-office_2.png'); height:40%">

            <div class="transbox">
                <h3>Some text</h3>
                 <p>
                    Some text

                </p>
            </div>

        </div>

CSS::

div.background{
background-size: 100% 100%; 

}
div.transbox{
color: #000000;
text-shadow: none;
}

来源：https://stackoverflow.com/questions/25567525/how-can-i-position-a-div-relative-to-an-image

标签

css

css-position