Home | Web Design | App / Game development | Flash | Flash Games | Graphic Illustration | Technical Illustration | Contact | Site Map    Twitter
  Galaxy Graphics Limited

Technical InformationCommon SWF questions: How can I centre a SWF on the page?

If the only thing you want to present on the page is a SWF file, then the most visually pleasing layout is to have it centred both horizontally and vertically. Horizontally is easy in many ways in HTML, but vertically requires a few CSS tricks, as below. The CSS style #wrapper below will achieve this, note the specifications which apply to the SWF size.

The CSS wrapper

<style type="text/css">
#wrapper {
top: 50%;
left: 50%;
width:550px; /*the width of your SWF*/
height:650px; /*the height of your SWF*/
margin-left: -275px; /*set to a negative number 1/2 the width of your SWF*/
margin-top: -325px; /*set to a negative number 1/2 the height of your SWF*/
background-position: center;
text-align: center;

Using the CSS wrapper in HTML

Once the CSS style is linked to the HTML page, you can call it like this:

<body style="margin:0px; padding:0px">
<div id="wrapper">
<object classid="clsid:D27 ........... etc. Your SWF embed code goes here.

Site content Copyright © 2001-2014 Galaxy Graphics Limited. | Privacy Policy | Terms of use