How to make images go horizontal rather than vertical!

[Serlei]

Can't seem to find a way to keep all my images horizontal!!

They all seem to turn out like this: 


When I would like them like this:

It might be because they all link to something as well! 

If anyone can help, thank you!! 

Here's where it is as well if you need to see it :3

[BlackMageGaming]

There are a lot of ways that you can do this, but with how you're handling the picture + text, I would use a div with the grid display.

The way I typically do this is by creating a div that displays everything in a grid. If yours would be in a 4 column format, it would need to have the style "display:grid; grid-template-columns: auto auto auto auto;" (The four autos are the amount of columns you would like to display, you can remove them or add more. Auto means that they resize themselves automatically.)

Then, for each picture with text under it, it would need to be inside another div. Nothing special needs to be done, just make sure that they are together.
Final code looks like this:

Code

<div style="display:grid; grid-template-columns: auto auto auto auto;">
  <div><a href="https://www.youtube.com/playlist?list=PLvFk3QopsJRB2Ijstwj8vN_VC7SjR6-JX" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204555.png" alt="makoto" style="width:200px"></a>
  <h style="font-size:12px;"><center>Danganronpa: Trigger Happy Havoc</center></h>
    </div>
    <div><a href="https://www.youtube.com/playlist?list=PLvFk3QopsJRD3n-GcYC40yp7EFA6tPotk" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204609.png" alt="hajime" style="width:200px"></a>
      <h style="font-size:12px;"><center>Danganronpa 2: Goodbye Despair</center></h>
</div>
    <div><a href="https://www.youtube.com/playlist?list=PLiCwdvC57cBrQoTeSMJLqcMSZz8RyOxr6" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204622.png" alt="komaru" style="width:200px"> </a>
      <h style="font-size:12px;"><center>Ultra Despair Girls</center></h></div>
    <div>
      <a href="https://www.youtube.com/playlist?list=PLGmWubZ1wU17FvYITGANem4BsSenQbG1y" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204631.png" alt="kaede" style="width:200px"> </a>
      <h style="font-size:12px;"><center>Danganronpa V3: Killing Harmony</center></h>
      </div>
    </div>

And it should look like this:



Again, this is by no means the most efficient way to do this. Just one of several ways to do it.

[Serlei]

There are a lot of ways that you can do this, but with how you're handling the picture + text, I would use a div with the grid display.

The way I typically do this is by creating a div that displays everything in a grid. If yours would be in a 4 column format, it would need to have the style "display:grid; grid-template-columns: auto auto auto auto;" (The four autos are the amount of columns you would like to display, you can remove them or add more. Auto means that they resize themselves automatically.)

Then, for each picture with text under it, it would need to be inside another div. Nothing special needs to be done, just make sure that they are together.
Final code looks like this:

Code

<div style="display:grid; grid-template-columns: auto auto auto auto;">
  <div><a href="https://www.youtube.com/playlist?list=PLvFk3QopsJRB2Ijstwj8vN_VC7SjR6-JX" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204555.png" alt="makoto" style="width:200px"></a>
  <h style="font-size:12px;"><center>Danganronpa: Trigger Happy Havoc</center></h>
    </div>
    <div><a href="https://www.youtube.com/playlist?list=PLvFk3QopsJRD3n-GcYC40yp7EFA6tPotk" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204609.png" alt="hajime" style="width:200px"></a>
      <h style="font-size:12px;"><center>Danganronpa 2: Goodbye Despair</center></h>
</div>
    <div><a href="https://www.youtube.com/playlist?list=PLiCwdvC57cBrQoTeSMJLqcMSZz8RyOxr6" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204622.png" alt="komaru" style="width:200px"> </a>
      <h style="font-size:12px;"><center>Ultra Despair Girls</center></h></div>
    <div>
      <a href="https://www.youtube.com/playlist?list=PLGmWubZ1wU17FvYITGANem4BsSenQbG1y" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204631.png" alt="kaede" style="width:200px"> </a>
      <h style="font-size:12px;"><center>Danganronpa V3: Killing Harmony</center></h>
      </div>
    </div>

And it should look like this:



Again, this is by no means the most efficient way to do this. Just one of several ways to do it.

THANK YOU SO MUCH!!!! 

 
I'll definitely be adding more images so that would be nice to keep in mind, thank you again!! 

[Rubbereon]

For future reference, the reason why they would not align like you'd wanted is because you're using divs which are block level elements, you want to either specify that they are inline or use spans instead, you don't need flexboxes for something this simple as BlackMageGaming alluded to and I believe it's better you know this because you might avoid future issues because if you have a habit of separating everything using divs I'm sure and certain you'll encounter more problems like this, if you instead get into the mindset of considering whether you need an inline level element or a block level element depending on the situation you won't have any problems.
<span> = Aligns elements horizontally
<div> = Aligns elements vertically
Divs are the same as paragrphs basically, <p> tags also behave that way, albeit they are inline-block I believe.

To be semantic, you would have to do something like this however:

Code

<div><a><img></a><a><img></a><a><img></a><a><img></a></div>

Because divs are important for separating content into segments, I don't think span can exactly fullfill that same criteria per the w3c. This would be fine too I guess

Code

<div><span><a><img></a></span><span><a><img></a></span><span><a><img></a></span><span><a><img></a></span></div>

Both anchor and image tags are inline, so don't worry about them.

You can keep the flexbox if you want that works too, but just keep this in mind because otherwise you might be coming here quite often due to div misalignment shenanigans.

[Serlei]

For future reference, the reason why they would not align like you'd wanted is because you're using divs which are block level elements, you want to either specify that they are inline or use spans instead, you don't need flexboxes for something this simple as BlackMageGaming alluded to and I believe it's better you know this because you might avoid future issues because if you have a habit of separating everything using divs I'm sure and certain you'll encounter more problems like this, if you instead get into the mindset of considering whether you need an inline level element or a block level element depending on the situation you won't have any problems.
<span> = Aligns elements horizontally
<div> = Aligns elements vertically
Divs are the same as paragrphs basically, <p> tags also behave that way, albeit they are inline-block I believe.

To be semantic, you would have to do something like this however:

Code

<div><a><img></a><a><img></a><a><img></a><a><img></a></div>

Because divs are important for separating content into segments, I don't think span can exactly fullfill that same criteria per the w3c. This would be fine too I guess

Code

<div><span><a><img></a></span><span><a><img></a></span><span><a><img></a></span><span><a><img></a></span></div>

Both anchor and image tags are inline, so don't worry about them.

You can keep the flexbox if you want that works too, but just keep this in mind because otherwise you might be coming here quite often due to div misalignment shenanigans.

Ty!!! :O

I figured it has something to do with <div> but I didn't exactly how to change it so this is very helpful!!!