Обновление панели прогресса в центре

Question

У меня есть запрос, касающийся панели обновления. Я хочу разместить панель прогресса обновления в середине моего экрана! Может кто-нибудь подсказать мне, в чем идея сделать так ??

Answer 1

Вы можете сделать это с помощью css

<style type="text/css" media="screen">
/* commented backslash hack for ie5mac \*/ 
html, body{height:100%;} 
/* end hack */
.CenterPB{
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px; /* make this half your image/element height */
margin-left: -30px; /* make this half your image/element width */
}
</style>

и у вас есть индикатор выполнения в div

<div class="CenterPB" style="height:60px;width:60px;" >Progress bar here</div>

справка:
http://www.sitepoint.com/forums/1243542-post9.html
http://www.search -this.com / 2008/05/15 / easy-вертикальное центрирование с помощью css /

Answer 2

Если вы используете jQuery, вы также можете попробовать (очень легкий) исправленный плагин .

Answer 3

Панель прогресса обновления отображает что-то (текст, изображение, разметка) во время обработки системой.

Так что вам нужно работать с разметкой, которую вы добавляете ..

Например, если у вас есть div, который отображает, вы можете получить его в центре, как это ..

<div style="width:200px;margin:0 auto;">Processing...</div>

Это покажет div в центре его контейнера.

Полный пример:

<asp:UpdatePanel ID="updatepnl1" runat="server">
    <ContentTemplate>
        <asp:GridView id="gv1" runat="server">
        </asp:GridView>
        <asp:UpdateProgress id="UpdateProg" runat="server">
            <ProgressTemplate>
                <div style="width:200px;margin:0 auto;">Processing...</div>
            </ProgressTemplate>
        </asp:UpdateTemplate>
    </asp:ContentTemplate>
</asp:UpdatePanel>

Конечно, вы должны поместить CSS в файл CSS и применить его к классу.

Как:

///Start css

.posCentre{width:200px;margin:0 auto;}

///End css

и измените ваш div на:

<div class="posCentre">Processing...</div>