如何在图像的中心显示文本，其中有 2 行图像，每行 4 个图像答案

【问题标题】：How to display text on the center of an image, where there are 2 rows of images, with 4 images in each row如何在图像的中心显示文本，其中有 2 行图像，每行 4 个图像
【发布时间】：2019-09-22 20:19:12
【问题描述】：

我希望在每张图片（中心）上都有文字，并且图片应该彼此相邻，中间没有空格。每行有 4 张图像，2 行，所以 8 个文本。我想在图像上显示的每个文本都在 div 块内（例如 Subnautica Image 有文本：Subnautica）。

.GameImage {
  width: 25%;
  height: 180px;
  float: left;
}

.GameImage:hover {
  filter: blur(1px);
}

<div class="Gallery">
  <div class="row">
    <div id="SubnauticaImage" ">
            <img src="Slike/Subnautica.jpg " class="GameImage " alt="Subnautica Slika ">
            <h4 class="ImageText ">Subnautica</h4>
     </div>
        <div id="TheForestImage ">
            <img src="Slike/TheForest.jpg " class="GameImage " alt="The Forest Slika ">
            <h4 class="ImageText ">The Forest</h4>
        </div>
        <div id="OriAndTheBlindForestImage ">
            <img src="Slike/OriAndTheBlindForest.jpeg " class="GameImage " alt="Ori and the Blind Forest Slika ">
            <h4 class="ImageText ">Ori and the Blind Forest</h4>
        </div>
        <div id="CitiesSkylinesImage ">
            <img src="Slike/CitiesSkylines.jpg " class="GameImage " alt="Cities Skylines Slika ">
            <h4 class="ImageText ">Cities Skylines</h4>
        </div>        
    </div> 

    <div class="row ">
        <div id="RustImage ">
            <img src="Slike/Rust.jpeg " class="GameImage " alt="Rust Slika ">
            <h4 clas="ImageText ">Rust</h4>
        </div>
        <div id="KerbalSpaceProgramImage ">
            <img src="Slike/KerbalSpaceProgram.jpg " class="GameImage " alt="Kerbal Space Program Slika ">
            <h4 class="ImageText ">Kerbal Space Program</h4>
        </div>
        <div  id="HearthStoneImage ">
            <img src="Slike/HearthStone.jpg " class="GameImage " alt="HearthStone Slika ">
            <h4 class="ImageText ">Hearthstone</h4>
        </div>
        <div id="AngryBirds2Image ">
            <img src="Slike/AngryBirds2.jpg " class="GameImage " alt="Angry Birds 2 Slika ">
            <h4 class="ImageText ">Angry Birds 2</h4>
        </div> 
    </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

这是将文本居中放置在图像上的基本代码

主要是你必须使图像父relative的position和文本absolute的position。

然后使用top 和left 属性与transform 一起居中

有关 CSS 位置的更多信息，请参阅 CSS Positions

* {
  box-sizing: border-box; /*for example purpose*/
}

.img-container {
  position: relative;
  width: 180px;
  height: 180px;
}

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

.img-container .ImageText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

<div id="SubnauticaImage" class="img-container">
  <img src="https://placehold.it/100x100" class="GameImage" alt="Subnautica Slika" />
  <h4 class="ImageText">Subnautica</h4>
</div>

【讨论】：

【解决方案2】：

您可以在容器上使用 css Flexbox，如下所示：

#AngryBirds2Image {
     position: relative; /* Must set parent position relative in order to keep h4 inside of it */
     display: flex;
     justify-content: center;
     align-items: center;
}
#AngryBirds2Image h4 {
     position: absolute; /* to put it hover the image */
}

【讨论】：