Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

putting image always in center page

Tags:

css

putting image always in center page(E.x image loading for ajax call), even when move scroll. how is it?

like image 389
Melissa Judd Avatar asked Jul 31 '11 16:07

Melissa Judd


1 Answers

For most browsers, you can use position:fixed

 img.centered {
     position:fixed;
     left: 50%;
     top:  50%;
     /*
         if, for instance, the image is 64x64 pixels,
         then "move" it half its width/height to the
         top/left by using negative margins
     */
     margin-left: -32px;
     margin-top:  -32px;
 }

If the image was, for instance, 40x30 pixels, you'd set margin-left:-20px; margin-top:-15px instead.

Here's a jsfiddle example: http://jsfiddle.net/WnSnj/1/

Please note that position:fixed doesn't work exactly the same in all browsers (though it's ok in all the modern ones). See: http://www.quirksmode.org/css/position.html

like image 185
Flambino Avatar answered Oct 13 '22 00:10

Flambino