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

Question

我想有文字对每个图像(中心)和图像应该是相邻的，两者之间没有空格。每行有4张图片，2行，所以有8条文本。我想在图像上显示的每一个文本都在div块中(例如，Subnautica有文本: 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>

​

Answer 1

这里是一个基本代码，用于将文本放在图像的中心。

最主要的是，您必须创建图像父级position relative和文本absolute的position。

然后使用top和left属性与transform一起对其进行居中。

有关CSS职位的更多信息，请参阅CSS职位。

​

* {
  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>

​

Answer 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 */
}