动态居中更新进度 Gif
我正在使用 Ajax updateprogress 并附加了一个加载 gif，问题是即使您位于页面的最底部/顶部，我如何强制 load.gif 位于屏幕中央？有没有办法让它始终出现在中心？我希望用户始终能看到中间的加载 gif，以便通知他们页面仍在加载中。
.CenterPB
{
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px; /* make this half your image/element height */
margin-left: -20px; /* make this half your image/element width */
width:auto;
height:auto;
}
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false">
<ProgressTemplate>
<div class="CenterPB" style="height: 40px; width: 40px;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/App_Themes/Default/images/progressbar1.gif"
Height="35px" Width="35px" />
Loading ...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
谢谢！
I'm using the Ajax updateprogress and I attached a loading gif, the problem is that how can i force the loading.gif to be in the center of the screen even if your in the very bottom / top of the page? is there a way to make it appear in the center always? I want the user to see the loading gif in the center always for them to be notified that the page is still loading..
.CenterPB
{
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px; /* make this half your image/element height */
margin-left: -20px; /* make this half your image/element width */
width:auto;
height:auto;
}
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false">
<ProgressTemplate>
<div class="CenterPB" style="height: 40px; width: 40px;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/App_Themes/Default/images/progressbar1.gif"
Height="35px" Width="35px" />
Loading ...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我假设您希望它保持在中间，即使在滚动时也是如此。那么你就必须改变
：
I'm assuming you want it stay put in the middle, even when scrolling. Then you would have to change:
in
位置：固定；应该可以做到这一点，这样加载图像将保持固定在浏览器窗口，因此如果用户滚动图像将保持在浏览器的中心，而不是页面的中心。
演示： http://jsbin.com/ifimek/edit#javascript,html,live （尝试明显滚动）
position: fixed; should do the trick, that way the loading image will stay fixed to the browser window so if the user scrolls the image will stay centered to the browser, not the page.
demo: http://jsbin.com/ifimek/edit#javascript,html,live (try scrolling obviously)