Динамическое центрирование Gif-файла с ходом обновления

#css #ajax #updateprogress

#css #ajax #updateprogress

Вопрос:

Я использую Ajax updateprogress и прикрепил загрузочный gif, проблема в том, как я могу заставить loading.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>
 

Спасибо!

Ответ №1:

Я предполагаю, что вы хотите, чтобы он оставался посередине, даже при прокрутке. Тогда вам придется изменить:

     position: absolute;
 

в

     position: fixed;
 

Ответ №2:

положение: исправлено; должно сработать, таким образом, загружаемое изображение останется фиксированным в окне браузера, поэтому, если пользователь прокручивает изображение, оно останется центрированным в браузере, а не на странице.

демонстрация: http://jsbin.com/ifimek/edit#javascript ,html,live (попробуйте явно прокрутить)

Комментарии:

1. кроме того, если вы хотите, чтобы тот был идеально центрирован, вам нужно установить ширину и высоту для div и установить поля в вашем css ровно на половину размера.