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!!!

[knifex]

You could also use flex! I love flex its very flex-ible
I'd also recommend you start using a stylesheet (.css) cuz it'll make things way easier in the future.

so your HTML would look something like

Code

<div class="container">
 <div class="playthrough"> <a href="etc"> <img src="etc"> </a> <h>one</h></div>
 <div class="playthrough"> <a href="etc"> <img src="etc"> </a> <h>two</h></div>
 <div class="playthrough"> <a href="etc"> <img src="etc"> </a> <h>and so on</h></div>
</div>

and the CSS

Code

.container {
  display: flex; 
  flex-wrap: wrap;  // makes it "loop back" when you have too many to fit your screen, good if you want to add more!
  flex-direction: row; // makes it horizontal 
  justify-content: center; //makes them be centered
}

and then instead of applying styles to each thing in html, you can just

Code

.playthrough{text-align:center}
.playthrough img {width:200px}
.playthrough h {font-size:12px;}

Also, for future reference, you can "turn" a <div> into a <span> by giving it the display:inline; style!

Let me know if you need clarification for anything :)

[Serlei]

You could also use flex! I love flex its very flex-ible
I'd also recommend you start using a stylesheet (.css) cuz it'll make things way easier in the future.

so your HTML would look something like

Code

<div class="container">
 <div class="playthrough"> <a href="etc"> <img src="etc"> </a> <h>one</h></div>
 <div class="playthrough"> <a href="etc"> <img src="etc"> </a> <h>two</h></div>
 <div class="playthrough"> <a href="etc"> <img src="etc"> </a> <h>and so on</h></div>
</div>

and the CSS

Code

.container {
  display: flex; 
  flex-wrap: wrap;  // makes it "loop back" when you have too many to fit your screen, good if you want to add more!
  flex-direction: row; // makes it horizontal 
  justify-content: center; //makes them be centered
}

and then instead of applying styles to each thing in html, you can just

Code

.playthrough{text-align:center}
.playthrough img {width:200px}
.playthrough h {font-size:12px;}

Also, for future reference, you can "turn" a <div> into a <span> by giving it the display:inline; style!

Let me know if you need clarification for anything :)

Ooooo thank you for your help!! 

If I have any questions I'll be sure to let you know (as I'm currently not able to do anything rn -w-)!!