Home/ Questions/Q 77719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T20:52:28+00:00

It has to be simple, here’s my CSS: .progressImage { position:relative; top:50%; } .progressPanel

  • 0

It has to be simple, here’s my CSS: 

.progressImage  {   position:relative;   top:50%; }  .progressPanel { height:100%; width:100%; text-align:center; display:none; }  <asp:Panel ID='pnlProgress' runat='server' CssClass='progressPanel'> <asp:Image ID='Image1' runat='server' CssClass='progressImage' ImageUrl='~/Images/Icons/loading.gif' /> </asp:Panel>

I toggle panel display depending on user action.

Works great in FireFox, but shows up at the top of the page in Safari.

p.s. ‘vertical-align:middle;’ doesn’t work either.

p.p.s. setting ‘position:relative;’ on the panel doesn’t work, setting ‘position:relative;’ on the panel and ‘position:absolute;’ on the image breaks it in FF and does nothing in Safari

THIS WORKED:

.progressPanel {   height:100%;   width:100%;   position:relative; }  .progressImage {   position:absolute;   top:50%;   left:50%; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Set the position of .progressPanel to relative, and the position of .progressImage to absolute. The following works for me in FF, IE, Safari. Set the negative margins to half the width/height of your image for perfect centering. Note that some parent of the progressPanel (body in this case) needs a height so that the progressPanel can fill it.

    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'     'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>     <head>         <title>Test</title>         <style type='text/css'>         body {           height:700px;         }         .progressImage {           position:absolute;           top:50%;           left:50%;           margin-left:-16px;           margin-top:-16px;         }          .progressPanel {           position:relative;           height:100%;           width:100%;           text-align:center;           background:red;         }         </style>     </head>     <body>     <div class='progressPanel'><img class='progressImage' src='pic.jpg'/></div>     </body> </html>
    • 0