如何将文本居中底部叠加在已经居中的图像上？

Question

我已经尝试了很多关于margin、position等的设置，但是如果不大致手动输入位置，例如 left: 10px; ，就无法将文本居中显示在我希望的图像上。这可能很简单，但我作为一个学习者无法解决它。

.container {
  position: relative;
}

.text-block-main {
  position: absolute;
  bottom: 5%;
  right: 44%;
  background-color: black;
  opacity: 75%;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 15px;
  border: 2px solid white;
  padding: 10px;
}

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1200px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" alt="vvg" style="height:100%;" class="center">
  <div class="text-block-main">
    <h2> The Starry Night </h2>
    <h3> Vincent van Gogh </h3>
  </div>
</div> 

这种居中方式是手动设置的，但实际上并不完全居中，而是取决于所使用的图片，因此我必须为每张想要使用的图片进行调整。希望能得到一些帮助。

- Leitmotif

Answer 1

你可以使用flexbox实现此功能。 text-block-main 获取图像的完整覆盖，并使用 Flexbox 将 inner div 居中对齐。

.container {
  position: relative;
}

.container img {
height: 100%;
width: 100%;
}

.text-block-main {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.text-block-main .inner {
 background-color: black;
  opacity: 75%;
  color: white;
  padding: 25px;;
  border-radius: 15px;
  border: 2px solid white;
  text-align: center;
 }

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1200px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" alt="vvg" style="height:100%;" class="center">
  <div class="text-block-main">
    <div class="inner">
      <h2> The Starry Night </h2>
      <h3> Vincent van Gogh </h3>
     </div>
  </div>
</div> 

- Jasper Mulder

Answer 2

使用flex方案。在container类上指定display: inline-flex以呈现img标签图像的形式。

同时从text-block-main类中删除bottom和right。

我在CSS中标记了所有编辑内容。

.container {
  position: relative;
  
  display: inline-flex; /*add this it*/
  align-items: center; /*add this it*/
  justify-content: center; /*add this it*/
}

.text-block-main {
  position: absolute;
  /*bottom: 5%;*/ /*remove this it*/
  /*right: 44%;*/ /*remove this it*/
  background-color: black;
  opacity: 75%;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 15px;
  border: 2px solid white;
  padding: 10px;
}

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1200px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" alt="vvg" style="height:100%;" class="center">
  <div class="text-block-main">
    <h2> The Starry Night </h2>
    <h3> Vincent van Gogh </h3>
  </div>
</div>

- s.kuznetsov

Answer 3

你可以尝试使用 flex 属性 来实现类似这样的效果。

.container {
  position: relative;
  height:200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container img {
  width:100%;
  position:absolute;
}

.text-block-main {
  background-color: black;
  opacity: 75%;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 15px;
  border: 2px solid white;
  padding: 10px;
}

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1200px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" alt="vvg" style="height:100%;" class="center">
  <div class="text-block-main">
    <h2> The Starry Night </h2>
    <h3> Vincent van Gogh </h3>
  </div>
</div> 

（下面我通过更改部分代码添加其他解决方案，您看不到的部分保持原样）

• 使用图像而无需使容器全宽的解决方案

.container img {
    /*width:100%;*/
    position:absolute;
}

• 不添加样式到图片的解决方案

/*
.container img {
  width:100%;
  position:absolute;
}
*/

.text-block-main {
  position:absolute; /* add this with the other styles */
}

- Mat.C