如何在没有绝对定位的情况下将文本放在图像上

Question

我正在使用引导程序进行布局，我遇到的困难之一是如何将文本放在图像上。我已经尝试了所有可以做的事情，例如使用不起作用的背景图像。其中一种方法是将图像放置为相对位置并将文本放置在绝对位置。

但是对于我的问题，我不能使用绝对位置，因为我有太多的图像和文本的长度是不同的。所以我必须通过使用 align-center 来解决这个问题..

如果有人熟悉这个问题，你能给这个问题一些建议吗？我必须将文本垂直和水平地放在图像的中心。

<div class="row justify-content-center">
      <div class="col-sm-auto">
        <img src="img/1.jpg">
      </div>
      <div class="col-sm-auto">
        <img src="img/2.jpg">
      </div>
      <div class="col-sm-auto">
        <img src="img/3.jpg">
      </div>
 </div>

Answer 1

如果图像源没有变化，那么你可以尝试从 CSS 设置 background: url(img/1.jpg) 并使用 background-position 调整它的位置

在这里查看小提琴。 http://jsfiddle.net/yktvod54/2/

html

<div class="row justify-content-center">
  <div class="col-sm-auto image-1">
  text1
  </div>
  <div class="col-sm-auto image-2">
  text2
  </div>
  <div class="col-sm-auto image-3">
  text3 with longer text
  </div>

css

.col-sm-auto {

  color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.col-sm-auto.image-1 {
  width: 200px;
  height: 150px;
  background: 
  url("https://vignette.wikia.nocookie.net/disney/images/8/89/Cute-Cat.jpg/revision/latest?cb=20130828113117");
  background-size: cover;
}

.col-sm-auto.image-2 {
    width: 200px;
    height: 200px;
    background: url("https://vignette.wikia.nocookie.net/disney/images/8/89/Cute-Cat.jpg/revision/latest?cb=20130828113117");
    background-size: cover;
}

.col-sm-auto.image-3 {
    width: 250px;
    height: 250px;
    background: 
    url("https://vignette.wikia.nocookie.net/disney/images/8/89/Cute-Cat.jpg/revision/latest?cb=20130828113117");
    background-size: cover;
}

Answer 2

将图像设置为 div 的背景，将该 div 设为 display:flex; justify-content: center; align-items: center; 并为其指定宽度/高度。 flex 对齐会将所有内容推到 div 的中心，但它需要一个高度/宽度，否则 div 将只是文本的大小。添加flex-wrap: wrap;，文本会环绕，但是没有像word-break这样的断点

Answer 3

我不能使用绝对位置，因为我有太多的图像和文本的长度是不同的

您可以使用相对长度来定位文本，这样无论它们的大小如何，它们都会居中。
您还需要translate CSS function。

.image-wrapper {
  width: 400px;
  position: relative;
}

.image-wrapper img {
  width: 100%;
  height: auto;
}

.image-wrapper figcaption {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 2em;
  color: white;
}

<figure class="image-wrapper">
  <img src="https://image.ibb.co/n5wsKU/bg3.jpg" alt="A nice pic!">
  <figcaption>A text that fits on one line</figcaption>
</figure>

---

如果您仍然不想使用绝对定位，这里有另一种解决方案，使用 background-image 而不是 img 标签：

.image-wrapper {
  width: 400px;
  height: 300px;
  display: flex;
}

.image-wrapper.image-01 {
  background: url('https://image.ibb.co/n5wsKU/bg3.jpg') center center / cover;
}

.image-wrapper p {
  margin: auto;
  font-size: 2em;
  color: white;
}

<div class="image-wrapper image-01">
  <p>Some text</p>
</div>