如何在流畅变化的图像（flexbox）上居中文本？ [复制]

Question

这是一个棘手的问题，如果太棘手，我想图像可以保持相同的大小。

我想将文本在图像内部/顶部居中，就好像它是背景一样，但我不想使用实际背景。

我还想保留我当前的 flexbox 的行为，因为我喜欢它。这意味着：

• 每行三个项目。
• 图片宽度上限为 66 像素。
• 在较小的浏览器宽度上调整图像大小（并非绝对需要）。
• 没有对行进行硬编码，它应该会自动溢出到新行中。

HTML：

<div class="container">
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
</div>

CSS：

.container {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: auto;
  flex-wrap: wrap;
}

.container .circle.box {
  width: 33.33%;
    width: calc(100% / 3);
  height: auto;
}

.circle.box img {
  width: 100%;
    max-width: 66px;
}

.circle.box .text {
  font-size: 30px;
}

jsfiddle：https://jsfiddle.net/hceac6mx/

还应该注意的是，虽然我在这里使用了一个可以 css'ed 的简单圆圈，但这只是一个示例。因此，对实际图像的需求是真实的。

如何做到这一点？

Answer 1

这是一种可能对您有用的方法（或者至少是朝着正确方向迈出的一步，希望如此）：

• 使每个包含图像和文本的 div 成为绝对定位的包含块。

  .container .circle.box { position: relative; }
  

• 使用绝对定位使文本在图像上居中。

  .circle.box .text {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(50%, 50%);
   }
  

Revised Fiddle

当图像非常小时，文本居中确实会中断，但我发布了这个答案，因为您提到图像重新调整大小并不是绝对必要的。

---

更新

在 cmets 中，Gerrit Bertier 发布了一个 enhanced demo，使文本也具有响应性。