Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2008-06-25
2
Medium Priority
?
1,720 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 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

885 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