Updatepanel stylesheet

Question

Inside the update panel I have update progess I want to set stylesheet inside the updatepanel like following I want to set vertical-align to middle but I it is not work how I can repair this code ?

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server">
   <ContentTemplate>
      <asp:Timer ID="Timer1" runat="server" Interval="1" OnTick="Timer1_Tick"></asp:Timer>
      <asp:Image ID="Image1" runat="server" Width="400px" Height="300px" Visible="false" />
      <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
          <ProgressTemplate>
              <div style="vertical-align:middle;">
                <asp:Image ID="Image3" runat="server" ImageUrl="~/Styles/img/loading.gif" />
                    Please Wait...</div>
           </ProgressTemplate>
       </asp:UpdateProgress>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

The vertical-align:middle; style will not have any effect on the image. What you probably want to do is add a CssClass="loadingimage" to the image and apply the following to it:

.loadingimage  {
     float:left;
     margin-top: 2px;
} 

Also, add some padding to the div:

  <div style="padding:4px;">
      <asp:Image ID="Image3" CssClass="loadingimage" 
          runat="server" ImageUrl="~/Styles/img/loading.gif"  />
      <span>Please Wait...</span>
  </div>