CODEWITHSUNDEEP
htmlcss
Omega Kewt
Omega Kewt

Reputation: 168

Trying to center and bottom an image inside a div using bottom: 0 and text-align: center sends it to the bottom corner of the div

I have an image that is already centered by using text-align: center; in the body, im trying to place the image in the bottom of its containing div but with the following code the image is placed in the bottom but its send to the corner of the div and its no longer centered, like so:

image no longer centered

I have the following HTML

body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  text-align: center;
  letter-spacing: 1px;
  word-spacing: 3px;
}

.top-container{
    background-color: #f67280;
    position: relative;
    padding: 100px;
    height: 300px;
}


.mountain {

  bottom: 0;
  position: absolute;
  /*transform: translate(-50%)*/

}
<div class="top-container">
  <img class="top-cloud" src="images/cloud.png" alt="cloud-img">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
  <img class="mountain" src="images/mountain.png" alt="cloud-img">
</div>

I found the solution to this and its by using transform: translate(-50%) in the css properties of the .mountain, but I dont understand why the image is no longer centered and is send to the side of div when I use the code above

Upvotes: 1

Views: 84

Answers (2)

Amaresh S M
Amaresh S M

Reputation: 3010

In your case just add transform: translate(-100%); to .mountain class It will align the .mountain class item(img) in center. Because text-align:center won't work if the position of the element is absolute.

Run the below snippet and check it.

body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  text-align: center;
  letter-spacing: 1px;
  word-spacing: 3px;
}

.top-container{
    background-color: #f67280;
    position: relative;
    padding:100px;
    height: 300px;
}

.mountain {
  bottom: 0;
  position: absolute;
  transform: translate(-100%);

}
<body>
<div class="top-container">
  <img class="top-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="bottom-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <img class="mountain" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
</div>
</body>
Note:Avoid using position:absolute;.

Absolutely positioned elements have no awareness of what's happening around them. When a page changes size, the elements don't move in relation to each other but rather in relation to their container and the values you've set for top, left etc.

To know more:https://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

Instead we can use display:block and margin:auto.

display:block -Displays an element as a block element (like <p>,<h2>). It starts on a new line, and takes up the whole width

basically p,h2 will display:block property and in body u have added text-align:center;So p,h2 will takes up whole width and aligned center, where img will not have display:block property that property. so you have to add it explicitly.

To align images in center we can simple use margin:auto give to img tag.And change the height to the .top-container to auto,so that height will be set automatically based on the screen size.

img{
display:block;
 margin:auto;
}

check out my code:

body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  letter-spacing: 1px;
  text-align:center;
  word-spacing: 3px;
}

.top-container{
    background-color: #f67280;
    padding: 100px;
    height: auto;
}

img{
display:block;
margin:auto;
}
<body>
<div class="top-container">
  <img class="top-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="bottom-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <img class="mountain" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
</div>
</body>

Alternate solution using display:flex;.

body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  letter-spacing: 1px;
  word-spacing: 3px;
}
.top-container{
    background-color: #f67280;
    padding: 100px;   
    display:flex;
    align-items:center;
    flex-direction:column;
    height: auto;
}
<body>
<div class="top-container">
  <img class="top-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img" height="100" width="100">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="mountain" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img" height="100" width="100">  
  
    <img  src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img" height="100" width="100"/>  
</div>
</body>

Upvotes: 2

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

Try modifying by adding a wrapper and giving it width: 100%;. Now inside the div, you can align right to make the image appear to the end.

This is because, position: absolute will act by positioning the element to the specific coordinates. With a single element, if you positioned it to a certain coordinate, then other rules like text-align:center wont be of any effect. This is why, rather than positioning the img, we create a wrapper and then within the wrapper, we make img to align center.

HTML

<div class="mountain">
    <img src="images/mountain.png" alt="cloud-img">
</div>

CSS

.mountain {
  bottom: 0;
  right: 0;
  position: absolute;
  width: 100%;
  text-align: center;
}

Upvotes: 0

Related Questions