Figcaption going to the right of a image instead of below-CodePudding

Recently I've decided to redesign my website and change the games list design but the figcaption that is suppose to be below the image decides to go to the right of it.

.GameSelectList {
    list-style-type: none;
    list-style-position: inside;
}

figcaption {
    text-align: center;
    float: left
}

.GameSelectListLinkImg {
    vertical-align: top;
}

.GameSelectListLinkA {
    float: left;
}

<ul >
                <li ><a  href="/Games/UnblockedGameFiles/MinecraftClassic.html"><img src="/Games/UnblockedGameImages/MinecraftClassic.webp" alt="Minecraft" width="100" height="100" ></a></li>
                <figcaption>Minecraft Classic</figcaption>
                <li ><a  href="/Games/UnblockedGameFiles/1v1lol.html"><img src="/Games/UnblockedGameImages/1v1.lol.jpg" alt="1v1.lol" width="100" height="100" ></a></li>
                <figcaption>1v1.lol</figcaption>
                <li ><a  href="/Games/UnblockedGameFiles/FortBuilding.html"><img src="/Games/UnblockedGameImages/FortBuilding.jfif" alt="Fort Building" width="100" height="100" ></a></li>
                <figcaption>Fort Building</figcaption>
                <li ><a  href="/Games/UnblockedGameFiles/GeoDash.html"><img src="/Games/UnblockedGameImages/GeometryDash.jfif" alt="Geometry Dash" width="100" height="100" ></a></li>
                <figcaption>Geometry Dash</figcaption>
                <li ><a  href="/Games/UnblockedGameFiles/motothree.html"><img src="/Games/UnblockedGameImages/Motox3m.webp" alt="Moto X3m" width="100" height="100" ></a></li>
                <figcaption>Moto X3M</figcaption>
                <li ><a  href="/Games/UnblockedGameFiles/tinyfishing.html"><img src="/Games/UnblockedGameImages/Tiny Fishing.webp" alt="Tiny Fishing" width="100" height="100" ></a></li>
                <figcaption>Tiny Fishing</figcaption>
</ul>

Someone please help :) Also the indent on the HTML is not supposed to look like that in my code editor (VS Code)

CodePudding user response：

you can attain it using flex and grid. Do you mean like this?

.GameSelectList {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
}

li.GameSelectListLin {
  display: grid;
  justify-content: center;
  text-align: center;
  }

<ul >
                <li >
                <a  href="/Games/UnblockedGameFiles/MinecraftClassic.html"><img src="/Games/UnblockedGameImages/MinecraftClassic.webp" alt="Minecraft" width="100" height="100" ></a>
                <figcaption>Minecraft Classic</figcaption>
                </li>
                
                <li >
                <a  href="/Games/UnblockedGameFiles/1v1lol.html"><img src="/Games/UnblockedGameImages/1v1.lol.jpg" alt="1v1.lol" width="100" height="100" ></a>
                <figcaption>1v1.lol</figcaption>
                </li>
                
                <li >
                 
                <a  href="/Games/UnblockedGameFiles/FortBuilding.html"><img src="/Games/UnblockedGameImages/FortBuilding.jfif" alt="Fort Building" width="100" height="100" ></a>
                <figcaption>Fort Building</figcaption>
                </li>
                
                <li >               
               <a  href="/Games/UnblockedGameFiles/GeoDash.html"><img src="/Games/UnblockedGameImages/GeometryDash.jfif" alt="Geometry Dash" width="100" height="100" ></a>
               <figcaption>Geometry Dash</figcaption>
               </li>
                
                <li >               
                <a  href="/Games/UnblockedGameFiles/motothree.html"><img src="/Games/UnblockedGameImages/Motox3m.webp" alt="Moto X3m" width="100" height="100" ></a>
                <figcaption>Moto X3M</figcaption>
                </li>
                
                <li >                
                <a  href="/Games/UnblockedGameFiles/tinyfishing.html"><img src="/Games/UnblockedGameImages/Tiny Fishing.webp" alt="Tiny Fishing" width="100" height="100" ></a>
                <figcaption>Tiny Fishing</figcaption>
                </li>
                
</ul>

CodePudding user response：

The problem is not in your html code problem is occuring in your css code just read it properly what you have written

figcaption {
    text-align: center;
    float: left
}

Just Remove float:left and the problem will be solved

CodePudding user response：

use this structure

<figure>
        <img src="URL YOUR IMAGE" alt="">

        <figcaption>Minecraft Classic</figcaption>
</figure>

EDIT:

<ul style="list-style-type: none;">
    <li>
        <a href="https://stackoverflow.com/">
            <figure>
                <img src="https://astronautsdevelopers.com/wp-content/uploads/2020/11/capa-post-stackoverflow-survey-2020-1024x626.jpg" alt="">
                <figcaption>It's a link with image with figure tag</figcaption>
            </figure>
        </a>
    </li>
</ul>