Horizontally centre and bottom position image in a div

Question

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.

I thought I explained it perfectly clear, I didn't think it was compulsory. Is it? If so, I will make sure to in the future. If my question has been voted down purely for this, I am quite surprised. — Colin Stewart, Oct 13 '16 at 12:51
Too many times a question is answered and then the poster comes back and says, "Oh, my markup is different than that!" — Rob, Oct 13 '16 at 13:02
The explanation was clear, I'd say that it's a good practice to include at least a minimal example (best case --> a snippet). *"Not all questions benefit from including code. But if your problem is with code you've written, you should include some."* (StackOverflow) — Ramiz Wachtler, Oct 13 '16 at 13:03
No problem, thank you both. I will include example next time. — Colin Stewart, Oct 13 '16 at 13:07

score 0 · Answer 1 · edited Oct 13 '16 at 12:40

0

centers the absolute image inside the relative div

div > img {
  left: 50%;
  transform: translateX(-50%);
}

edited Oct 13 '16 at 12:40

Lalji Tadhani

14,041
3
23
40

answered Oct 13 '16 at 12:40

Barry127

1,212
1
12
23

Thank you for the response, it almost worked but wasn't quite centred (slightly to the right). – Colin Stewart Oct 13 '16 at 12:50

score 0 · Accepted Answer · answered Oct 13 '16 at 12:45

0

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

answered Oct 13 '16 at 12:45

priya_singh

2,478
1
14
32

1

Thank you! Worked perfectly. I tried this before (margin: 0 auto) but without the left and right. What specifically does this do? – Colin Stewart Oct 13 '16 at 12:50
@ColinStewart To make horizontally center we use margin: 0 auto; but we are positioning it. and if we position any element then it will automatically start from left:0; So in order to make it center use left:0; right:0; . If its worked for you then upvote it. – priya_singh Oct 13 '16 at 13:02
1

Okay, great. I understand now. Thanks very much. I have upvoted but don't think it shows as I am brand new. Accepted as answers as well though. – Colin Stewart Oct 13 '16 at 13:07

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

Alternatively, you can combine setting left/right to zero and setting the left/right margin to auto:

.box {
  position: relative;
}

.box img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2em;
  margin: 0 auto;
}

Demo: https://jsfiddle.net/ffyof90e/

Explanation: Why does "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto" actually center?

edited May 23 '17 at 12:06

Community

1
1

answered Oct 13 '16 at 12:58

paulflakstad

88
4

score 0 · Answer 4 · answered Oct 13 '16 at 13:03

Do it like this, for example:

<div id="divid">
<img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png" alt="Smiley face" height="42" width="42">
</div>

You can now apply css like this:

div > img {
   display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:auto;

}

#divid{
  position: relative;
    height: 300px;
    width: 300px;
   border: 3px solid #73AD21;
}

You can check it at https://jsfiddle.net/n4528wxz/1/

Horizontally centre and bottom position image in a div

4 Answers4