Question

我正在尝试将图像与页面中间的某些文本对齐。图像正确到达中心，但叠加文本偏离中心。下面是代码。文字应位于图片的左上角。

<div class="w3-content">
<div class="w3-row-padding" style="text-align: center;">
    <div class="w3-display-container">
        <img src="w3images/house5.jpg" alt="House" style="width:50%;"  class="animated fadeInRight slower">
        <div class="w3-display-topleft w3-black w3-padding animated fadeInRight slower">Summer House</div>
    </div>
</div>
</div>

Answer 1

如果您需要图片顶部的文字，我认为您应该将图片用作背景图片，或者使用绝对位置。

.image-wrap {
  position: relative;
  margin: 0 auto;
  width: 50%;
}
.image-wrap .text {
  position: absolute;
  top: 0;
}

https://jsfiddle.net/jymqj51r/

Answer 2

做了一些改变并让它发挥作用..感谢所有

<div class="w3-container animated fadeInRight slower w3-white "  style="float: right;">
<div class="w3-display-container" >
<div><img src="w3images/house2.jpg" ></div>
<div class="w3-display-topleft w3-black w3-padding">My Summer House</div>
</div>
</div>

将图像与叠加文本对齐在页面中心

2 个答案: