Figcaption going to the right of a image instead of below

user_17314959 0
Viewed 50

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 class="GameSelectList">
                <li class="GameSelectListLink"><a class="GameSelectListLinkA" href="/Games/UnblockedGameFiles/MinecraftClassic.html"><img src="/Games/UnblockedGameImages/MinecraftClassic.webp" alt="Minecraft" width="100" height="100" class="GameSelectListLinkImg"></a></li>
                <figcaption>Minecraft Classic</figcaption>
                <li class="GameSelectListLink"><a class="GameSelectListLinkA" href="/Games/UnblockedGameFiles/1v1lol.html"><img src="/Games/UnblockedGameImages/1v1.lol.jpg" alt="1v1.lol" width="100" height="100" class="GameSelectListLinkImg"></a></li>
                <figcaption>1v1.lol</figcaption>
                <li class="GameSelectListLink"><a class="GameSelectListLinkA" href="/Games/UnblockedGameFiles/FortBuilding.html"><img src="/Games/UnblockedGameImages/FortBuilding.jfif" alt="Fort Building" width="100" height="100" class="GameSelectListLinkImg"></a></li>
                <figcaption>Fort Building</figcaption>
                <li class="GameSelectListLink"><a class="GameSelectListLinkA" href="/Games/UnblockedGameFiles/GeoDash.html"><img src="/Games/UnblockedGameImages/GeometryDash.jfif" alt="Geometry Dash" width="100" height="100" class="GameSelectListLinkImg"></a></li>
                <figcaption>Geometry Dash</figcaption>
                <li class="GameSelectListLink"><a class="GameSelectListLinkA" href="/Games/UnblockedGameFiles/motothree.html"><img src="/Games/UnblockedGameImages/Motox3m.webp" alt="Moto X3m" width="100" height="100" class="GameSelectListLinkImg"></a></li>
                <figcaption>Moto X3M</figcaption>
                <li class="GameSelectListLink"><a class="GameSelectListLinkA" href="/Games/UnblockedGameFiles/tinyfishing.html"><img src="/Games/UnblockedGameImages/Tiny Fishing.webp" alt="Tiny Fishing" width="100" height="100" class="GameSelectListLinkImg"></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)

css html
3 Answers

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

user_165130010

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

user_155547500

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>
user_146519670
Related