Question

我有一张图片可能会改变其位置，具体取决于position标记上我想要img的某些操作和几个div。

简化代码如下：

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

为了更好地理解想象我在中心周围有一个带有小方块的图像，我想要将foobar信息放在图像方块中，无论我在哪里放置图像。有什么想法吗？

Answer 1

你可以尝试使用绝对定位“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

您可以根据需要调整宽度和magins，使文本居中或定位在您想要的位置。 display: inline-block的{{1}}强制.container不跨越页面的整个宽度，并允许我们以绝对定位水平居中。

Answer 2

这样的东西？ 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;
}

Answer 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;}

Answer 4

您可以尝试使用 translateX（-50％）以及必要的左边距或右边距来将要居中的元素相对于图像居中。

#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*/
}

有关使用translateX

的信息，请参见此页

Answer 5

这是HTML代码。举个例子。

     <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;
}

如何相对于图像定位div？

5 个答案: