Question

我已经阅读了很多其他问题，但是仍然不知道如何正确地在图像中放置文本。我几乎得到了我所需要的全部东西，但我仍然需要将图像中心放置在其父母的位置。

.imageholder {
  position: relative;
  float: left;
}

.discount {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 22px;
  background: rgba(232, 63, 66, 1);
  color: #fff;
  padding: 5px 10px;
  text-align: left;
  max-width: 80px;
  border-bottom-right-radius: 25px;
}

.black_opacity_background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

<div class="imageholder">
  <div class='black_opacity_background'></div>
  <div class="discount">-50%</div>
  <img src="https://d2npu017ljjude.cloudfront.net/images/regular-43/w378/h283/96583-4.jpg">
</div>

https://jsfiddle.net/Amiths/poxj7kfq/

在此示例中，我想将imageholder相对于主视图居中。由于我在float: left;中使用imageholder，所以我不知道如何实现这两个目标。

感谢您的帮助。谢谢！

Answer 1

尝试一下：

.bigContainer {text-align:center;}

.center {display:inline-block}

.imageholder {
  position: relative;
  float: left;
}

.discount {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 22px;
  background: rgba(232, 63, 66, 1);
  color: #fff;
  padding: 5px 10px;
  text-align: left;
  max-width: 80px;
  border-bottom-right-radius: 25px;
}

.black_opacity_background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

<div class="bigContainer">
  <div class="center">
    <div class="imageholder">
      <div class='black_opacity_background'></div>
      <div class="discount">-50%</div>
      <img src="https://d2npu017ljjude.cloudfront.net/images/regular-43/w378/h283/96583-4.jpg">
   </div>
  </div>
</div>

相对于图像的位置元素

1 个答案: