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设置背景：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>

如果您仍然不想使用绝对定位，这是使用背景图像代替 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>

如何将文字放在图片上而不进行绝对定位

3 个答案: