Search code examples
htmlcssimagepositioning

Horizontally centre and bottom position image in a div

New guy over here. I've searched and have found similar issues but not exactly what I am after.

I simply want to know how to horizontally centre an image within a div, but also position the image at the bottom of the div (20px or so from the bottom to be precise).

I can kind of get the look I'm after by setting the container div as position:relative, and the image position:absolute, with bottom:30px and margin-left: 49%. I would just rather it be exact, rather than using left margin. The container needs to be relative for other elements I have on the page.

Any help will be greatly appreciated. Thanks.

Solution

  • Horizontally center and vertically bottom divClick here

    .parent {
  position: relative;
}

.img {
  width: 50px;
  height: 50px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
}