Centering an Animate project in Dreamweaver

Report · Jun 11, 2017

Hi,

I am completely lost with this one. I created a project in Animate, published it, and have imported it into Dreamweaver. All I want to do is center it horizontally in Dreamweaver. I've tried using the following CSS (margin: 0, auto;) to no avail.

Here is the test page.

http://taffyproductions.com/test/

Thanks in advance.

Gary

Report · Jun 11, 2017

I don't work with Animate stuff much. But try this CSS in your page and see if it helps.

* { box-sizing:border-box }

canvas {width: 80%; margin-left: 10%; margin-right: 10%}

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 11, 2017

Hi Nancy,

Thank you for the quick response. When you bring a published Animate project code into DW it generates the following code for the Body tag. It is written slightly different than the CSS I am used to seeing 9in a style sheet). I want to put it all in one div because the rest of the site will be centered as well.

Any ideas?

You rock!

</body>

Report · Jun 11, 2017

Canvas is a separate element and that's where your animation is located.

If you want a centered <body>, do as you always have. Give it a width and margin: 0 auto.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 11, 2017

The two things that are confusing me are :

1) Why do the rules for init have the standard CSS semantics (colon, semi-colon, commas) while the rules for the canvas are in parenthesis?

2) I've found the only way to move the canvas is by adjusting the init margin property and it doesn't work unless you display pixels (20px)?

Thanks again for your time

Report · Jun 12, 2017

Hi,

I have centered an Animate object on my page using CSS on a section tag, please refer snapshot. I can share you my css file that I used. Please see if it helps.

Regards,

Niharika Gupta

Adobe Dreamweaver.

Report · Jun 12, 2017

Hi Nikarika,

Yes please share the CSS you used. Thank you

Report · Jun 12, 2017

Add margin: 0 auto; display: block; to the <canvas> tag like below:

or move all the attributes to a css selector:

#canvas {

background-color: #000000;

margin: 0 auto;

display: block;

}

Centering an Animate project in Dreamweaver

1 Correct answer