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.
views:
28answers:
2
A:
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. it will position 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
Pankaj Kumar
2010-04-03 10:33:59
IF position:absolute works, why bother using position:fixed in newer browsers?
xandy
2010-04-03 10:36:27
@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
2010-04-03 10:43:49
@shawn: i saw ur code. try using ARR class on the image inside the div and not on the div
Pankaj Kumar
2010-04-03 10:50:07
ok I'll try that.
Shawn
2010-04-03 10:50:40
Pankaj Kumar, I put the code:.ARR{ position:fixed; bottom:0px; left:50%; }But it's still not centered
Shawn
2010-04-03 10:55:13
@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
2010-04-03 10:57:34
Pankaj Kumar I see the problem was not factoring the image's width into the centering
Shawn
2010-04-03 10:59:14
A:
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
2010-04-03 10:55:18