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/

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

如何实现这一目标？

Answer 1

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

使每个div保持图像并将文本作为包含块进行绝对定位。
```
.container .circle.box { position: relative; }
```

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

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

Revised Fiddle

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

<强>更新

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

如何将文本置于流畅变化的图像（flexbox）之上？

1 个答案: