How to align an only image at the bottom of the page?

Question

I don't want to put all the images at the bottom of the screen, just one.

Answer 1

There are a couple of ways to position something at the bottom.  For example, to have it fixed, so that even if you scroll it won't move:

<img style="position: fixed; top: 80vh; left: 300px;" src="images/start_button.png">

You will likely have to adjust the "top: 80vh" and "left: 300px;" parts.  "80vh" = 80% of the viewport height, "300px" = 300 pixels.  You can mix the units using "calc()" like this: "left: calc(50vw - 200px);".

For more information see:

https://www.w3schools.com/css/css_positioning.asp

https://www.w3schools.com/cssref/css_units.asp

If that isn't what you're looking for you'll have to be more specific.

Comments

It's work! Thank you so much!

Answer 2

Can you give us a more detailed description of how exactly you want this to look like and what aspect you are struggling with?

Comments

It's simple. I want the start button always in that position (in the bottom of the page):

Start button on bottom of the page

 

---

Put something like this into your stylesheet:

.start {
  position: fixed;
  bottom: 1em;
  left: 50%;
  transform: translate(-50%, -50%);
}

Then add the button like this:

<div class="start"><<button "Start">><</button>></div>

The bottom will now always be in the position specified in the css on the passage you put it in.

Answer 3

Any block element that's the last in the HTML is - per default - also at the bottom of the page. So just put the image you want at the bottom at the end of your passage in its own block.

<div>[img[Image]]</div>