Colin Stewart Colin Stewart - 1 month ago 7
CSS Question

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.

Answer

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;
}