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

我想在每个图像上都有文本（中间），图像应该相邻，中间没有空格。每行有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>

最佳答案

下面是一个基本代码，用于将文本居中放置在图像上
最主要的是，你必须使position的图像父relative和position的文本absolute。
然后使用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>

关于html - 如何在图像中心显示文本，图像中心有两行图像，每行有四张图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55984146/