Home > Silverlight > How to Center a Silverlight App in HTML

How to Center a Silverlight App in HTML

August 22, 2009

I’ve written a lot of CSS over the years, so when I wanted to center my Silverlight App in my web page I figured it would be a piece of cake.  It is easy, but it gave me some frustration because it required one element that I normally would not specify.  Read on for the details.

Setting up the CSS

Here is the default CSS created by Visual Studio:

<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
body {
    padding: 0;
    margin: 0;
}
#silverlightcontrolhost {
    height: 100%;
}

To accomplish this little trick I need to define a wrapper DIV in my CSS.  This Div will then wrap the entire contents of the site, so now I only have to center that DIV.  We need to define the width of the content area: it makes sense that you want to set the size of something you want to center so it can be calculated.  To do this, I set the width property of the wrapper DIV to the pixel width of my Silverlight control.

Since not all browsers interpret things the same way, we need to add a couple of items in order to center our content.  First, add text-align: center; to the body tag.  This should handle the centering for IE browsers, at least older ones.  For Firefox and Safari, we need to add margin: 0 auto; to our wrapper DIV.

This is my typical set up in traditional HTML scenarios, but when I tried using this CSS the Silverlight object would not show.  I had some video in this particular example, and it was a good thing I did or I would have gone crazy trying to figure this out: I could hear the video playing, so I knew the Silverlight object was running, I just couldn’t see it.

It turns out that you need to specify the height property as well in the wrapper DIV.  It doesn’t have to be exact, just larger than your Silverlight control.  If you make it larger than 0 but smaller than your control, it will actually truncate the control, which could be an interesting effect in certain scenarios.  I don’t know the reason for this, perhaps it’s because the Silverlight control runs in an object tag, but I’m not sure.  Please post in the comments below if you know why this was required.

Here is the final CSS I used:

<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
body {
    padding: 0;
    margin: 0;
    text-align: center;
}
#wrapper
{
    margin: 0 auto;
    width: 800px;
    height: 800px;
}
#silverlightcontrolhost {
    height: 100%;
}
About these ads
Categories: Silverlight
  1. George
    November 18, 2009 at 3:28 pm

    Thank you for the tip. I was getting frustrated :)

  2. Mikesding
    January 6, 2010 at 7:49 pm

    Wow… I was having lots of trouble with this and you solved it in 1 go! Thanks!

  3. January 7, 2010 at 11:55 am

    Glad I could help Mike! Be sure to read this follow up for another method:

    http://www.developingfor.net/net/another-silverlight-centering-trick.html

  4. John
    April 3, 2011 at 8:10 pm

    Doesn’t work for me. Very frustrating. All I have to do is set the #wrapper in CSS? It displays a bit left of center and on top.

  1. August 23, 2009 at 2:45 pm
Comments are closed.
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: