How to align videos to centre in the sidebars

When you first start adding content to your template you will find that videos, in particular, may not be displayed centrally in the widget. Or, if you already have videos on your blog, they may be thrown to the left within the widget. So, you might want to realign the videos so they are centered in the middle of the widget. This is one of the easiest things to do actually. All you do is add the <center> and </center> tags into the videos widget itself.

A typical embedded video code will look like this:

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/O0hh1kSb2RE" frameborder="0" allowfullscreen></iframe>

For two or more videos I add the <p> and </p> closing tag between each video, to give a line space between each video, like so:

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/O0hh1kSb2RE" frameborder="0" allowfullscreen></iframe>

<p>
</p>
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/xzRTQ8Yaipw" frameborder="0" allowfullscreen></iframe>

Once you have added all the videos you want in the videos widget, you simply add the <center> tag at the very beginning of all the video code, and </center> at the very end of all the video code. The end result will look like this:

<center><iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/O0hh1kSb2RE" frameborder="0" allowfullscreen></iframe>

<p>
</p>
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/xzRTQ8Yaipw" frameborder="0" allowfullscreen></iframe></center>

If you don't want to get confused you can place the <center> and </center> tags on new lines by themselves. By doing so it does not affect the other code any differently, and the end result will still be exactly the same as if you put them on the same lines as the video code itself.

This usually works for centrally aligning most other widgets too. You can add the <center> and </center> tags to things like feedjit widgets, embedded images, clocks, and to some search bars, for example. Give it a try and see what works and what doesn't.