When you publish a Captivate project to HTML, the animation is always at the top of the page.

Let’s say you want the animation to be in the center of the screen, e.g. because the animation will run fullscreen. How can you do this?

You just have to change some of the HTML in the published .htm file.

This is the business part of the default htm file for a project of 1024*768 (lines 17 and 18 in HTML output, lines 212 and 213 in SCORM 1.2 output):

<div id="CaptivateContent">&nbsp;
</div>

The only thing you need to do is change the style of the <div> tag like this (found it here):

<div id="CaptivateContent" style="position:absolute; top:50%; left:50%; margin-top:-384px; margin-left:-512px;">&nbsp;
</div>

Let’s take a look at what this piece of code does.

1. Position: absolute
This is used to detach the div from the rest of the page content.

2. Top:50% and left:50%
This code sets the top left corner of the animation in the middle of the screen.

3. Margin-top:-384px and margin-left:-512px
We change the position of the div with negative margins half the amount of the size of the swf.

Let’s take another example:

<div id="CaptivateContent" style="position:absolute; top:50%; left:50%; margin-top:-300px; margin-left:-400px;">&nbsp;
</div>

Can you guess for what size of project the code above is?

Are all of your projects the same size and do you always want them centered?

For the HTML output, change the file “Standard.htm” in this (default Win7 64bit) location: C:\Program Files (x86)\Adobe\Adobe Captivate 5.5\Templates\Publish. This file is used as a template when publishing the project. All projects published after you changed this file, will have the changed code in it.

Easy, if you know it.

BTW, the project site of the last example is 800*600. I guess you figured it out by now.