将图片始终放在中心页面 [英] putting image always in center page

问题描述

即使在移动滚动时，也始终将图像放在中心页面(加载用于ajax调用的E.x图像).怎么样?

解决方案

对于大多数浏览器，您可以使用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;
 }

例如，如果图像为40x30像素，则改为设置margin-left:-20px; margin-top:-15px.

这是一个jsfiddle示例: http://jsfiddle.net/WnSnj/1/

请注意，position:fixed并非在所有浏览器中都完全一样(尽管在所有现代浏览器中都可以).请参阅: http://www.quirksmode.org/css/position.html

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

解决方案

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

这篇关于将图片始终放在中心页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！