Known Participant

Answered

Centering an Animate project in Dreamweaver

Forum|Forum|9 years ago
June 11, 2017
2 replies
818 views

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

This topic has been closed for replies.

Correct answer osgood_

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;

}

Niharika Jha

Adobe Employee

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.

T

TaffyproAuthor

Known Participant

Hi Nikarika,

Yes please share the CSS you used. Thank you

O

osgood_Correct answer

Legend

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;

}

Nancy OShea

Community Expert

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

T

TaffyproAuthor

Known Participant

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>

Nancy OShea

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded