Solved

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

Posted on 2008-06-25
2
1,715 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS for Popup in ASP.NET 4 49
Visual Studio Start / Browser Emulator menu different 2 40
Drag & Drop Error 5 32
Firefox CSS Help. 1 12
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... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

751 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