center a panel in a layout region

[chrwei]

I'm trying to get a panel centered inside a layout.  this was first try:

Code:

<div data-options="region:'center'">
    <div class="easyui-panel" title="Login" style="width:400px;margin:0 auto">some content</div>
</div>

using Chrome's inspector I see this gets parsed out to:

Code:

<div class="panel" style="display: block; width: 400px;">
    <div class="panel-header" style="width: 388px;">
        <div class="panel-title">Login</div>
        <div class="panel-tool"></div>
    </div>
    <div class="easyui-panel panel-body" title="" style="width: 398px; margin: 0px auto; height: auto;">
some content</div>
</div>

putting the style on the panel-body and not copying it to the panel where it will actually do something. 

I also tried these:

Code:

data-options="style:{margin: 0 auto}"
data-options="style:{margin: 0px auto}"
data-options="style:{margin-top: 0;margin-right: auto}"

these all generate parsing errors on the console and leave me with only the original code rendered.

this one does not error, and puts the margin in the panel where it should be

Code:

data-options="style:{margin: 0}"

but since it's missing the margin-right, it doesn't do what I want.

before I attempt fixing the style parser, should I be doing this a different way?

[stworthy]

Try this code:

Code:

<div data-options="region:'center'">
    <div class="easyui-panel" title="Login" data-options="style:{margin:'0 auto'}" style="width:400px">some content</div>
</div>

[chrwei]

there's the trick!  thanks.

so for something like margin-top:0px I'd do style:{'margin-top':0} ? 

[stworthy]

Code:

data-options="style:{margeTop:0}"

[chrwei]

so style:{} doens't take css properties, it takes the javascript equivalent?