Centering Plugin in DIV?

[Keen - Summit of Legends]

I want to center this checkbox plugin on the page, but the code I have isnt working.

Tips?

[Kami]

When requesting coding support, I encourage you to get into the habit of providing a URL so we can see what is happening and what code is being used.

[Lynx]

In addition to what Kami said above, you said that it was a plugin - I'd suggest checking to see if there's a support thread for it. Most plugins will link their support thread. You can get it a couple of ways:

(1) Go to the Plugin Library and locate the plugin. Go to its page and there is a Get Help With This Plugin? button on the right side:




(2) Another way is right in the plugin settings. Next to the Save Changes button is a Need help? link:




If the plugin author linked their support thread, clicking either of those will take you to it. If you end up in the Plugins board, then the author did not link, or does not have, a support thread.

[Keen - Summit of Legends]

Sorry I thought the screen shot was enough...

[Brian]

Based on what I was able to see in the forum in your profile the div isn't being centered correctly. You need to use the margin CSS property to center a div. Specifying that its right and left margins should be set to auto forces it to center within its parent element.

<div style="margin: 0 auto;"></div>

Result:

This div will be centered within the quote.

[Keen - Summit of Legends]

Thanks for the reply! I tried putting that in before, but it didn't work. I assume I entered it into the wrong area then. I should be entering it into the header correct?

<div style="margin: 0 auto;"><span id="mychecklist"></span></div>

This is what I have in my header. And here is a link to my home page in case you need it.
summitoflegends.net

[Brian]

If you're just adding a div outside of the checklist this won't work because divs always take up the full width of their parent element due to being a block element.

In the HTML For List section of the plugin's settings I would suggest changing the span to a div element and adding the margin property in my example alongside its existing inline styles.

<div style="margin:0 auto;width:400px;min-height=200px;position:relative;line-height:2;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border:3px solid #000000;float:left;background-color:white;"><center>Keen's To Do List</center>
#list</div>

[Keen - Summit of Legends]

I copy/pasted that and removed the span one, but it didn't work. Oh well. And its apparently not taking up all the space there because sometimes it's next to other elements instead of above or under them. It's not horribly important that this gets centered, it would have just fit into my brain better X3 Thanks for your help!

[Brian]

Remove this property and it should be centered:

float:left;

Completely skipped my mind that it was there.

[Keen - Summit of Legends]

rofl okay it worked XD thanks so much!