时间戳

首页 > 解决方案 > 如何对齐图像中心的文本

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

问题描述

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

见下图 https://ibb.co/XF7t0GG

我面临的问题是 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>

我希望你们能帮助我

标签： htmlcss

解决方案

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

.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>

推荐阅读