• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1722
  • Last Modified:

How do you center a silverlight object within an HTML page?

I'm trying to center a silverlight app that I've created within an html page.  I believe this is a simple thing to do with CSS, however when I tried a few of the things I saw on the Internet they didn't seem to work.  Below is a snippet of the style section and the object tag from my site.   You can view the actual site at www. silverlightwebapps.com

    <style type="text/css">
    html, body {
          height: 1000px;
          overflow: scroll;
    }
    body {
          padding: 0;
          margin: 0;
    }
    #silverlightControlHost {
          height: 1000px;
          width:800px;
          overflow:scroll;
          
    }
    </style>
   
... later, within the body tag...
    <div id="silverlightControlHost">
            <object data="data:application/x-silverlight," type="application/x-silverlight-2-
0
mdobbles
Asked:
mdobbles
1 Solution
 
codeQuantumCommented:
In your HTML put a DIV inside your <body> and give an ID="wrapper"

<body>
<div id="wrapper">
... your html here
</div>
</body>

Then change the CSS as following :
    html, body {
          height: 1000px;
          overflow: scroll;
text-align: center;
    }
 
#wrapper {
margin: 0 auto;
text-align: left;
width:800px;
}

Open in new window

0
 
adler77Commented:
To center horizontally, you can use "text-align: center;" as noted above. To center vertically, set the css for your Silverlight div to "top: 50%; margin-top: -412px;" (I'm assuming your app is 800x825, as in the other thread. Whatever it is, set the margin-top to NEGATIVE 1/2 of the height).
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now