When code like this is put into a gadget, one common question is "how do I center it?"
There are (at least) three options for doing this, ie for putting a gadget into the middle (horizontally) of the area it is located in. These are described below.
Option 1: Centre all the gadgets in your blog
To center-align every single gadget in your blog, just, add a CSS rule to your blog. The rule to add is:.widget {
text-align: center;
}
This will centre the contents and title of every gadget on your blog.
Option 2: Only center-align the specific gadget
To only centre-align one gadget, which is made from HTML/Javascript code, you can just put the gadget-code from the 3rd party (eg PayPal, Amazon, etc) inside a centering statement, like this:<div style="text-align: center;">Install the code into your blog the way you would usually install this 3rd party code.
PUT THE CODE FROM THE 3RD PARTY HERE
</div>
This will centre-align the contents (not title) of the specific gadget that you add.
Note the American spelling of the word "center" - and don't forget to put the closing </div> statement at the end.
There may be some gadgets where it would be possible to add the centring statement to the gadget code itself, rather than putting it outside. I don't recommend this (unless you're so comfortable with HTML and CSS that you don't need to be reading this article), because it introduces a risk that you will interfere with some other aspect, or that you will lose the centering if you ever need to refresh the code.
Option 3 - Make a new style rule just for the gadget
If you only want to centre one (or several) gadgets - not all of them - then it's best to define a new style that is to be used on specific gadgets: put this new style into your template, and then apply it to the gadgets like this.<div class="YourNewSytle">PUT THE CODE FROM THE 3RD PARTY HERE</div>
This approach will only centre the gadget contents - not any header that you give to it.
There are lots of options that you could put into the new style rule, but at a minimum it needs to have
.YourNewStyleNotice that there is a "." (ie a full-stop) before the name of your new style.
{
text-align: center;
}
Also, it's best not to use a number as the style-name (eg "2nd-gadgetStyle"), because this doesn't work with some browsers.
Related Articles
Putting HTML code from a 3rd party into your blogAdding a new CSS style into your template
Centering the header in your blog
Putting a gadget above your blog's header
Removing the attribution gadget from Designer-template blogs
