12

I have a website, and I need to have an image centered at the bottom of the visible page. So in any screen size, the image will still be at the bottom, and centered.

Shawn
  • 185
  • 1
  • 2
  • 7
  • 1
    Left 50% does not put it to the center for my link. testing-zone-51.blogspot.com – Shawn Apr 03 '10 at 10:43
  • since you are a new user here please select the best answer for a problem as the accepted answer when your problem is solved.It helps in pointing the others to the solution that worked for you and gives reputation to the answerer – Pankaj Kumar Apr 03 '10 at 11:12

3 Answers3

29

using pure css you can achieve this in all new browsers

.fix{
    position:fixed;
    bottom:0px;
    left:50%;
}
<img src="yourimagepath" class="fix"/>

and for IE6 you can use position:absolute; instead of fixed. This positions the image on the bottom of the page but, as you scroll up, the image will scroll with the page. Unfortunately position:fixed in not supported in IE6.

Tiago Martins Peres
  • 14,289
  • 18
  • 86
  • 145
Pankaj Kumar
  • 1,748
  • 6
  • 28
  • 41
  • IF position:absolute works, why bother using position:fixed in newer browsers? – xandy Apr 03 '10 at 10:36
  • 1
    @xandy: Fixed is the position of an object in relation to the browser window. Absolute is the position of an object in relation to its containing element – Pankaj Kumar Apr 03 '10 at 10:43
  • @shawn: i saw ur code. try using ARR class on the image inside the div and not on the div – Pankaj Kumar Apr 03 '10 at 10:50
  • Pankaj Kumar, I put the code: .ARR{ position:fixed; bottom:0px; left:50%; } But it's still not centered – Shawn Apr 03 '10 at 10:55
  • @Shawn use an outside div that has `bottom: 0px; left: 0px; right: 0px; text-align: center` and put the image in there without any additional CSS. That should center it. – Pekka Apr 03 '10 at 10:57
  • Pankaj Kumar I see the problem was not factoring the image's width into the centering – Shawn Apr 03 '10 at 10:59
4

You should put it into a div and then, imagining your image is 500px wide:

div.className{
position:absolute;
margin-left: -250px; /* very important for the image to be centered */
left:50%;
bottom:0px;
}
fmsf
  • 36,317
  • 49
  • 147
  • 195
3

Old question but here is the best solution I came up with. Put the image in a container div, the div is positioned at the bottom of the screen and the image is centered inside of it. The div has a set width of 100% so the image can center properly. For the margin:auto; to work the image must be displayed as a table element with the display:table;

Using display:table; means you don't have to set a fixed width to the element that you want centered.

    <style>
    .sticky-image-wrapper{
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .sticky-image-wrapper img{
        display: table;
        position: relative;
        margin: auto;
   }
   </style>

    <div class="sticky-image-wrapper">
       <img src="myimage.jpg" />
    </di>
stuyam
  • 9,561
  • 2
  • 21
  • 40