How to get img on the bottom & center of div without using absolute position

Question

I am pretty new in HTML and CSS (2 weeks) and this is the first time iam using Stack overflow. i am trying to make position of a img on the bottom of the div and in the center of the bottom side and are not able to find solution. I would like to do it without using position: absolute because img will move when you open page on smaller/bigger screen

it is this image i would like to move:" <img class="mnt" src="mountain.png" alt="mountain image">

body { 
  text-align: center;
  margin:0;
}
 
h1 {
  font-size: 5.6rem;
  margin:0;
  color: white;
  line-height: 2;
  font-family: 'Clicker Script', cursive;
}
    
h2 {
  font-weight: normal;
  font-family: 'Kavivanar', cursive;
}
    
.nav {
  background-color: #87c6eb;
  text-align: right;
  padding-top: 50px;
}

.top {
  background-color: #87c6eb;
  height: 100vh;
}
    
.programer {
  font-size: 150%;
  color: white;
}

.top-cloud {
  position:absolute;
  top:100px;
  right: 300px;
  opacity: 70%;    
}
    
.bottom-cloud {
  position:absolute;
  left: 350px;
  opacity: 45%;   
}
    
.mnt {
  /* ???????? */
}

<div class="top">
  <nav class="nav">
    <a href="#About" class="navigation">About</a>
    <a href="#Work" class="navigation">Work</a>
    <a href="#contact" class="navigation">Contact</a>
  </nav>
  <img class="top-cloud" src="cloud.png" alt="cloud img">
  <h1>I`m Veljko</h1>
  <h2 class="programer"><em>future programmer</em></h2>
  <img class="bottom-cloud" src="cloud.png" alt="cloud img">
  <img class="mnt"  src="mountain.png" alt="mountain img">
</div>

Does this answer your question? [Center image horizontally within a div](https://stackoverflow.com/questions/10989238/center-image-horizontally-within-a-div) — Abhishek Bhagate, May 28 '20 at 22:28

score 0 · Answer 1 · answered May 29 '20 at 03:45

0

You can try this, it worked for me.

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
<div id="footer">  
    <img class="mnt"  src="mountain.png" alt="mountain img">
</div>

answered May 29 '20 at 03:45

Sai Kiran

1
1

thank you for answer. this dosent help me because the img is fixed to the bottom and follow on the other part of the page. i need to put it in the bottom and stay there and dont move :) – velpre May 29 '20 at 20:33

score 0 · Accepted Answer · answered May 29 '20 at 03:51

This is very easy with flex, I have increased .top height to 300vh, so you can see the result here easily,

body { 
  text-align: center;
  margin:0;
}
 
h1 {
  font-size: 5.6rem;
  margin:0;
  color: white;
  line-height: 2;
  font-family: 'Clicker Script', cursive;
}
    
h2 {
  font-weight: normal;
  font-family: 'Kavivanar', cursive;
}
    
.nav {
  background-color: #87c6eb;
  text-align: right;
  padding-top: 50px;
}

.top {
  background-color: #87c6eb;
  height: 300vh;
display: flex; 
flex-direction: column;
}
    
.programer {
  font-size: 150%;
  color: white;
}

.top-cloud {
  position:absolute;
  top:100px;
  right: 300px;
  opacity: 70%;    
}
    
.bottom-cloud {
  position:absolute;
  left: 350px;
  opacity: 45%;   
}
    
.mnt {
  /* ???????? */
margin: auto auto 0;
}

<div class="top">
  <nav class="nav">
    <a href="#About" class="navigation">About</a>
    <a href="#Work" class="navigation">Work</a>
    <a href="#contact" class="navigation">Contact</a>
  </nav>
  <img class="top-cloud" src="cloud.png" alt="cloud img">
  <h1>I`m Veljko</h1>
  <h2 class="programer"><em>future programmer</em></h2>
  <img class="bottom-cloud" src="cloud.png" alt="cloud img">
  <img class="mnt"  src="mountain.png" alt="mountain img">
</div>

that was what i needed. thank you very much Atui :) have a nice weekend — velpre, May 29 '20 at 20:38

How to get img on the bottom & center of div without using absolute position

2 Answers2