2011-10-27 3 views
2

私はAjaxのupdateprogressを使用していますが、ロードGIFを添付していますが、ローディングgifを強制的に画面の中央に置くことができます/ページのトップ?それは常にそれが中心に表示される方法はありますか?私は、ユーザーがページがまだロードされていることを通知する彼らのために、常に中央に積載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> 

ありがとう!

答えて

5

私はあなたがそれをスクロールしても、真ん中に置く滞在したいと仮定しています。そして、あなたは変更する必要があります:あなたが望むなら

position: fixed; 
1

位置:固定;そのようにすると、読み込みイメージはブラウザのウィンドウに固定されたままになります。ユーザーがスクロールすると、イメージはページではなくブラウザの中央に表示されます。

デモ:http://jsbin.com/ifimek/edit#javascript,html,live(明らかにスクロールしてみてください)

+0

position: absolute; 

も、完全にあなたがdiv要素の幅と高さを設定し、ちょうど半分にあなたのCSSのマージンを設定する必要が中心TOTサイズの。 –