HTML Sugarcube alignment of images

[DeliciousCereal]

I am working on my first game and i encountered the following problem.
I wanted to set a scene up where random "events" are displayed.
Here is my code:
<<set _random to random(1, 50)>>
<<if _random < 41>>
<img src="IMG\Forest.png" width="800">
You are in the Forest
<</if>>
<<if _random == 41>>
<img align="top" src="IMG\Forest\1.png" width="800">

You are not sure what you saw, but you definitly saw <b>something</b>
<</if>>
<<if _random == 42>>
<img src="IMG\Forest\2.png" width="800">

You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<<if _random == 43>>
<img src="IMG\Forest\3.png" width="800">

You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<<if _random == 44>>
<img src="IMG\Forest\4.png" width="800">

You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<<if _random == 45>>
<img src="IMG\Forest\5.png" width="800">

You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<<if _random == 46>>
<img src="IMG\Forest\6.png" width="800">

You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<<if _random == 47>>
<img src="IMG\Forest\7.png" width="800">

You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<<if _random == 48>>
<img src="IMG\Forest\8.png" width="800">

You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<<if _random == 49>>
<img src="IMG\Forest\9.png" width="800">

You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<<if _random == 50>>
<img src="IMG\Forest\10.png" width="800">

You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
[[Town]]
[[Park]]
[[Witch's Hut]]

The problem is that the images and links are not aligned with the top.
I understand why this happens, but how can i solve this and align everything correctly?

 

[Alcahest]

Depends on what you mean with align with the top. Assuming you want everything displayed centered from top to bottom, I'll give an example using some CSS and <br>.
First add this to your CSS:

c {
  display: block;
  text-align: center;
  margin-left:10%;
  margin-right:10%;
}

Then the code could look like this (optimized).

<c>
<<set _random to random(1, 50)>>
<<if _random < 41>>
    <img src="IMG\Forest.png" width="800">
    <br>
    You are in the Forest
<<else>>
    /* using if/elseif but switch is another option */
    <<if _random == 41>>
        <img src="IMG\Forest\1.png" width="800">
    <<elseif _random == 42>>
        <img src="IMG\Forest\2.png" width="800">
    <<elseif _random == 43>>
        <img src="IMG\Forest\3.png" width="800">
        /* ...and so on until 50 */
    <</if>>
    <br>
   /* If the message will be the same, no need to type it inside every if statement, only at the end*/
    You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<br>
[[Town]]
[[Park]]
[[Witch's Hut]]
</c>

Also, you should consider using a widget to display images.

You must be registered to see the links

That way, you won't have to repeat the same thing everytime you want to add an image, just something simple like
<<im "Forest/3.png">>
and the rest of the code will be in the widget.

 

[DeliciousCereal]

Depends on what you mean with align with the top. Assuming you want everything displayed centered from top to bottom, I'll give an example using some CSS and <br>.
First add this to your CSS:

c {
  display: block;
  text-align: center;
  margin-left:10%;
  margin-right:10%;
}

Then the code could look like this (optimized).

<c>
<<set _random to random(1, 50)>>
<<if _random < 41>>
    <img src="IMG\Forest.png" width="800">
    <br>
    You are in the Forest
<<else>>
    /* using if/elseif but switch is another option */
    <<if _random == 41>>
        <img src="IMG\Forest\1.png" width="800">
    <<elseif _random == 42>>
        <img src="IMG\Forest\2.png" width="800">
    <<elseif _random == 43>>
        <img src="IMG\Forest\3.png" width="800">
        /* ...and so on until 50 */
    <</if>>
   /* If the message will be the same, no need to type it inside every if statement, only at the end*/
    You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<br>
[[Town]]
[[Park]]
[[Witch's Hut]]
</c>

Also, you should consider using a widget to display images.

You must be registered to see the links

That way, you won't have to repeat the same thing everytime you want to add an image, just something simple like
<<im "Forest/3.png">>
and the rest of the code will be in the widget.

Thank you so much!
Looks way better now.

 

[Alcahest]

Thank you so much!
Looks way better now.

I missed the <br> after the image when you saw something (edited now).

While I'm at it... since you name your images 1.png, 2.png etc, you could optimize the code even more.

<c>
<<set _random to random(1, 50)>>
<<if _random > 10>>
    <img src="IMG\Forest.png" width="800">
    <br>
    You are in the Forest
<<else>>
    <<set _image = "IMG/Forest/"+_random+".png">>
    <img @src="_image" width="800">
    <br>
    You are not sure what you saw, but you definitely saw <b>something</b>
<</if>>
<br>
[[Town]]
[[Park]]
[[Witch's Hut]]
</c>

Another benefit of having random 1-10 as "successes" is that you can easily change the chance of success later by simply changing the 50 to something else.