CODEWITHSUNDEEP
css
cavemancode
cavemancode

Reputation: 3

How to position img element sit bottom of its parent and horizontally centered

body {
  text-align: center;
  margin: 0;
}

.top_container {
  background-color: #eaf6f6;
  height: 100vh;
  width: auto;
  position: relative;
}

.mountain {
  position: absolute;
  bottom: 0;
  margin-left: auto;
}

.cloud {
  position: absolute;
}

h1 {
  margin-top: 0;
}
<body>
  <div class="top_container">
    <img class="cloud" src="https://via.placeholder.com/150/0000FF/808080/" alt="cloud_picture">
    <h1> TEXT </h1>
    <h2>a <span class="">TEXT</span>TEXT</h2>
    <img class="cloud" src="https://via.placeholder.com/150/FFFF00/000000"
 alt="cloud_picture">
    <img class="mountain" src="https://via.placeholder.com/150/FF0000/FFFFFF" alt="mountain_picture">
  </div>
  <h1>LALALALALA</h>
</body>

Hello everyone,

I want to position mountain image sit bottom of div and horizontally centered.

It looks like text-align not work when i set position absolute to position image the bottom of div. I also tried to left:50%; to center it but this also makes no change.

Upvotes: 0

Views: 57

Answers (3)

Becky
Becky

Reputation: 5585

Here's a more elegant way using flex magic

    .top_container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .mountain {
      margin-top: auto;
    }

jsFiddle

Upvotes: 1

Shiz
Shiz

Reputation: 693

your code:

.mountain{
  position: absolute;
  bottom:0;
  margin-left: auto;
}

sample working solution:

.mountain{
  position: absolute;
  bottom:0;
  right: 50%;
  transform: translateX(50%);
}

here's the sample link

Upvotes: 2

oaklandrichie
oaklandrichie

Reputation: 491

Display the parent as flex and add a justify-content rule.

    .top_container{
      display: flex;
      justify-content: center;
      background-color: #eaf6f6;
      height: 100vh;
      width: auto;
      position: relative;
    
    }

Pen: https://codepen.io/richiegarcia/pen/wvGNWdj

Upvotes: 1

Related Questions