1

I tried to use text-align property with display block but that didn't work either. I wanted a div that covered the entire webpage with the mountain image center aligned at its bottom. I managed to move the mountain image to bottom by setting bottom:0; but then I was unable to center align the image. Thank you very much. 

 <!-- following is the html code: -->
    <body>
      <div class="topcontainer">
        <img class="topcloud" src="images/newcloud.png" alt="cloud-image">
        <h1>I'm Mohit</h1>
        <p class="occupation">A <span>pro</span>grammer</p>
        <img class="bottomcloud" src="images/newcloud.png" alt="cloud-image">
        <img class="mountain" src="http://seanhalpin.io/assets/img/content/home/masthead/land.svg" alt="">
      </div>
    </body>


    <!-- and this is the css: -->
    body {
      margin: 0;
      text-align: center;
      font-family: 'Merriweather', serif;
    }

    h1 {
      margin: 0;
      font-family: 'Sacramento', cursive;
      font-size: 70px;
      color: #30e3ca;
    }

    h2 {
      font-family: 'Montserrat', sans-serif;
    }

    h3 {
      font-family: 'Montserrat', sans-serif;
    }

    span {
      text-decoration: underline;
    }

    .mountain {
      display: inline-block;
      position: absolute;
      bottom: 0;
    }

    .topcontainer {
      display: inline-block;
      background-color: #e4f9f5;
      margin-bottom: 20px;
      height: 100vh;
      width: 100%;
      position: relative;
    }
    .bottomcloud {
      position: absolute;
      left:300px;
      height: 94.28px;
      width: 177.3333px;
    }

    .topcloud {
      position: relative;
      left: 290px;
      height: 94.28px;
      width: 177.3333px;
    }
Muhammad Haseeb
  • 1,269
  • 12
  • 22
Mohit Singh
  • 143
  • 11
  • Does this answer your question? [How to horizontally center a
    ?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div)
     – Pushkin Mar 27 '20 at 04:45

2 Answers2

1

I edit the code a little bit to achieve what you want just add a parent div to the image tag and styled it. So here is the my solution and I hope it is helpful for you. HTML:

<body>
      <div class="topcontainer">
        <img class="topcloud" src="images/newcloud.png" alt="cloud-image">
        <h1>I'm Mohit</h1>
        <p class="occupation">A <span>pro</span>grammer</p>
        <img class="bottomcloud" src="images/newcloud.png" alt="cloud-image">
        <div class="mountain">
            <img class="mountain" src="http://seanhalpin.io/assets/img/content/home/masthead/land.svg" alt="">
        <div>
      </div>
    </body>

CSS:

 body {
      margin: 0;
      text-align: center;
      font-family: 'Merriweather', serif;
    }

    h1 {
      margin: 0;
      font-family: 'Sacramento', cursive;
      font-size: 70px;
      color: #30e3ca;
    }

    h2 {
      font-family: 'Montserrat', sans-serif;
    }

    h3 {
      font-family: 'Montserrat', sans-serif;
    }

    span {
      text-decoration: underline;
    }

    .mountain {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: absolute;
      bottom: 0;
    }

    .topcontainer {
      display: inline-block;
      background-color: #e4f9f5;
      margin-bottom: 20px;
      height: 100vh;
      width: 100%;
      position: relative;
    }
    .bottomcloud {
      position: absolute;
      left:300px;
      height: 94.28px;
      width: 177.3333px;
    }

    .topcloud {
      position: relative;
      left: 290px;
      height: 94.28px;
      width: 177.3333px;
    }
Abdelmonaem Shahat
  • 532
  • 2
  • 6
0

The easiest solve here would be to make the divs background image in CSS rather than using the image tag. Something like this:

<div class="topcontainer">
   //other stuff in here 
</div>

.topcontainer {
height: 100vh;
width: 100vw;
background-image: url('http://seanhalpin.io/assets/img/content/home/masthead/land.svg');
background-repeat: no-repeat;
background-position: bottom;

}

Hope this helps!

investInSoup
  • 185
  • 8