html - div中的文本定位

Question

我必须在我的图像上插入一个缩放图片，我已经尝试了很多方法，但我无法弄清楚，请帮助我...

所以图像 "lupe" 必须在图像 "boy" 之上。

它应该是这样的:

HTML:

<div class="section4">
  <div class="content4">
    <p><span style="font-size:30px; color:#fdd400">Nieuws</span>
    </p>
    <img style="width=34px; height:34px;" src="images/lupe.png" />
    <div class="picture1">
      <img src="images/div4-boy.png" />
      <div class="text1">
        <p><span style="font-size: 30px; color: #fdd400; float: left; margin-top: -2%;">Lorum ipsum</span>
        </p>
        <br>
        <p><span style="font-size: 14px; color: white; float: left">12 mei, 2014 | Sport</span>
        </p>
        <br>
        <br>
        <p><span style="font-size: 14px; color: white; float: left ">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span>
        </p>
        <p><span style="font-size: 14px; color: white; float: left ">sed do eiusmod tempor incididunt ut labore et dolore</span>
        </p>
        <p><span style="font-size: 14px; color: white; float: left ">magna aliqua. Ut enim ad minim veniam [...]</span>
        </p>
        <br>
        <br>
        <br> <a href="#"><p><span style="font-size: 14px; color: #fdd400; float: right ">Lees meer ></span></p></a>
      </div>
    </div>
    <div class="picture2">
      <img src="images/div4-girl.png" />
      <div class="text2">
        <p><span style="font-size: 30px; color: #fdd400; float: left; margin-top: -2%;">Lorum ipsum</span>
        </p>
        <br>
        <p><span style="font-size: 14px; color: white; float: left">12 mei, 2014 | Zwemmen</span>
        </p>
        <br>
        <br>
        <p><span style="font-size: 14px; color: white; float: left ">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span>
        </p>
        <p><span style="font-size: 14px; color: white; float: left ">sed do eiusmod tempor incididunt ut labore et dolore</span>
        </p>
        <p><span style="font-size: 14px; color: white; float: left ">magna aliqua. Ut enim ad minim veniam [...]</span>
        </p>
        <br>
        <br>
        <br> <a href="#"><p><span style="font-size: 14px; color: #fdd400; float: right ">Lees meer ></span></p></a>
      </div>
    </div>
  </div>
</div>

CSS:

.section4 {
    position: relative;
    width: 100%;
    height: 670px;
    background-color: #222222;
    background-size: 100% 100%;
}
.content4 {
    float: left;
    width: 100%;
    height: 100%;
}
.content4 p {
    position: relative;
    text-align: center;
    margin-top: 2%;
}
.picture1 {
    width: 100%;
    height: auto;
    ;
}
.picture1 img {
    margin-left: 15%;
    width: 40%;
    height: 50%;
}
.text1 {
    width: 27%;
    height: 80%%;
    float: right;
    margin-right: 17%;
}
.picture2 {
    width: 100%;
    height: 40%;
    margin-top: 3%;
}
.picture2 img {
    float: right;
    margin-right: 17%;
    width: 500px;
    height: 252px;
}
.text2 {
    width: 27%;
    height: 80%%;
    float: left;
    margin-left: 15%;
}

Answer 1

你可以试试这个:

.icon {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    text-align: center;
}