Toggler Won't Center Text

[erinep23]

I created a button look for the toggler tag....but I can't get it to center the text. Below is the class and the psuedo class. I've attached an image too. Help please!

MadCap|toggler /* MadCap|toggler: togglers */
{
color: inherit;
margin-bottom: 10px;
mc-open-image-alt-text: Close this section;
mc-closed-image-alt-text: Open this section;
mc-image-position: right;
mc-image-spacing: 8px;
text-decoration: none;
mc-open-image: none;
mc-closed-image: none;
}

MadCap|toggler.AccountManagement
{
background: #00A0B0;
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
background-color: #d9ce3d;
}

[ChoccieMuffin]

I vaguely remember something like this in one of Mike Hamilton's webinars that fixed this gotcha, so I'm not taking any credit for the solution if my suggestion provides the fix.

At first glance you have no left margin, so your text starts at the very left of the button thing. I know you have padding but you might also need a margin. I suggest you add a decent margin - say 50px - and see what happens then. I bet that'll move the text to the right. You can then play about with finding the right numbers.

[erinep23]

Thanks for helping me. I added a margin but all it did was this -

[erinep23]

I'm also using div columns and wonder if that is what is causing this?


div.columns
{
clear: right;
}

div.columns div
{
float: left;
margin: 12px;
}

[ChoccieMuffin]

Thanks for helping me. I added a margin but all it did was this -

Darn!!! Did you add margins to both bits of code you showed us, or just one? If just one, try doing the same to the other one.

[erinep23]

No dice.