html - 如何对齐图像中心的文本

Question

我试图在一个 div 中将文本居中，这个 div 包含一个图像 + 另一个包含需要居中的文本的 div。

见下图:

我面临的问题是，同样位于 div 中的图像不允许我在中心勾勒出文本轮廓。

我尝试应用填充和边距(甚至是负数)但是没有结果

现在这是我的 HTML 和 CSS 文件中的代码:

.destinations {
  padding: 5px 15px;
}

.destinations img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}

.flex-item {
  width: 290px;
  height: auto;
  border-radius: 10px;
  margin: auto;
}

.flex-item-title {
  text-align: center;
  color: white;
  background-color: black;
  opacity: 0.8;
}

<div class="destinations">
  <div class="flex-item">
    <img src="assets/img/wassenaar.jpg">
    <div class="flex-item-title">Wassenaar</div>
  </div>
</div>

希望你能帮帮我

Answer 1

这是一种将文本在图像上垂直和水平居中的方法:

.destinations {
  padding: 5px 15px;
}

.destination {
  width: 290px;
  height: 290px;
  display: flex;
  border-radius: 10px;
  margin: auto;
  background-image: url("https://placekitten.com/500/500");
  justify-content: center;
  align-items: center;
}

.title {
  text-align: center;
  color: white;
  background-color: black;
  opacity: 0.8;
}

<div class="destinations">
  <div class="destination">
    <div class="title">Wassenaar</div>
  </div>
</div>