Solved

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

Posted on 2008-06-25
2
1,714 Views
Last Modified: 2013-11-12
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
Comment
Question by:mdobbles
2 Comments
 
LVL 5

Accepted Solution

by:
codeQuantum earned 500 total points
ID: 21871651
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
 
LVL 8

Expert Comment

by:adler77
ID: 21889606
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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Whether you've completed a degree in computer sciences or you're a self-taught programmer, writing your first lines of code in the real world is always a challenge. Here are some of the most common pitfalls for new programmers.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question