中心ajax装载机

Question

我正试图将ajax加载器作为中心。但没有运气。装载程序显示在屏幕的右上角。感谢您的帮助。以下是代码

div.amshopby-overlay {
    background-color: #fafafa;
    height: 100%;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 555;
}
div.amshopby-overlay img {
    top: 100px;
    left: 45%;
    display: block;
    position: absolute;
}

div.amshopby-overlay div {
    margin: 0 auto;
    display: block;
    width: 300px;
    height: 200px;
    background:  url('../images/amshopby-overlay.gif') 50% 50% no-repeat;
}

Answer 1

试试这个css。

<div class="container">
    <img src="loader.gif" class="loader">
</div>

CSS

 .container{position:relative; height:300px;width:300px;}
 .loader{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}

Answer 2

所以我假设amshopby-overlay中的div包含你的加载器图像。试一试：

div.amshopby-overlay div {
  display: block;
  width: 300px;
  height: 200px;
  background:  url('../images/amshopby-overlay.gif') 50% 50% no-repeat;
  /* Add this */
  position: absolute;
  top: 50%;
  margin-top: -100px;
  left: 50%;
  margin-left: 150px;
}

基本上，顶部和左侧将从顶部和左侧推动div 50％。我们将把div宽度和高度值的-50％添加到垂直和水平中心。试试看。希望它有所帮助。

Answer 3

＆＃34;保证金：自动＆＃34;应该给你你想要的居中风格。 CSS详情如下。

HTML

<div class="container">
    <img src="http://placehold.it/150x150" class="loader">
</div>

CSS

.container {
     /*Absolute positioning will now be relative to this tag*/
     position:relative; 

     /*Arbitrary Height*/
     height:300px;
     width:300px;

     /*border to show container*/
     border: 1px solid;
 }

.loader {
    /*Allow top, left, right, bottom 
    to be set relative to container*/
    position: absolute;

    /*Set edges of tag so margin auto knows the max boundry*/
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    /*Allows the use of margin auto*/
    display: block;

    /*Horizontally and vertically centered
    (Display block will fill remaining margin space equally)*/
    margin: auto;
}

的jsfiddle

http://jsfiddle.net/16vrxgxh/1/

Answer 4

我喜欢做的一个解决方案，无论我居中只是一个图像，都是用css背景属性做的：

HTML

<div id="container"></div>

CSS

#container.loader{
    background:url('loader.gif') center center no-repeat;
}

现在在您的javascript中，在发出ajax请求时添加类loader并在完成时删除该类。