将ajax加载图像放在页面中心

时间:2014-11-16 10:25:38

标签: javascript css ajax

将ajax加载图像放在页面中央。

使用上面的代码通过引用上面Div元素中的加载图像来通过ajax加载数据库记录

我的问题是如何让这个加载图片出现在移动页面的中心可能是通过一些CSS或任何 其他方式 感谢

<script type="text/javascript">

$(document).ready(function() {

//setInterval(function(){


$('#loan').fadeIn(400).html('<img width="60" height="60" src="load.gif" align="absmiddle">&nbsp;<span class="loading">Loading Data....Please Wait</span>');

 $.ajax({ type: "POST", 
url:'load.php',
data:"uname="+uname,
 success:function(data){
 $('#bring_data').html(data); 
$('#load_spin').hide();
} }) 

//}, 10000); 


});


</script>


<div id="load_spin"></div>

2 个答案:

答案 0 :(得分:0)

你需要使用CSS。

#load_spin {
    display: block;
    position: absolute;
    top: 50%,
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
}

如果#load_spin的父元素相对定位,则上述CSS将确保标识为load_spin的元素在此容器中水平和垂直居中。

答案 1 :(得分:0)

使图像居中的方法:将其置于自己的块中并将边距属性应用于它。

例如:

&lt; - CSS FILE - &gt;

&#13;
&#13;
img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
&#13;
<img class="displayed" src="file.jpg" alt="file">
&#13;
&#13;
&#13;

希望这有帮助!