css - 相对于图像定位元素

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>