如何在图像中心显示文本，图像中心有两行图像，每行有四张图像

Question

我希望每个图像（中心）上都有文字，并且图像应该彼此相邻，并且两者之间不能有空格。每行有2张图像，每行有4张图像，因此有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>

Answer 1

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

最主要的是，您必须使图像的position的{​​{1}}和文本relative的{​​{1}}为父。

然后使用position和absolute属性与top一起居中

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

left

transform

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