Question

将图像始终放在中心页面（对于ajax调用加载E.x图像），即使在移动滚动时也是如此。怎么回事？

Answer 1

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

Answer 2

<style>
.CenterScreen{
   position:fixed;
   /*element can move on the screen (only screen, not page)*/

   left:50%;top:50%;
   /*set the top left corner of the element on the center of the screen*/

   transform:translate(-50%,-50%);}
   /*reposition element center with screen center*/

  z-index:10000;
  /*actually, this number is the count of the elements of page  plus 1 :)*/
  /*if you need that holds the element top of the others. */
</style>

如果您将此类添加到您的元素中，它将始终是屏幕的中心。

例如：

<a href="#" class="CenterScreen">Hello world</a>

Answer 3

这可能会对您有所帮助：http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/

Answer 4

将图像放在带有某个类名（centeredImage）的div标签中，并使用以下css

div.centeredImage {

  margin: 0px auto;
  position: fixed;
  top: 100px;//whatever you want to set top;

}

将图像始终放在中心页面

4 个答案: