Centering an image is a bit of a tricky endeavor. It used to be just a case of wrapping the image in <center> tags but that's no longer the case. In today's web standards we can't use the <center> code and as a result we need to develop some CSS code.

The following code is something I've been using for awhile now and I'm quite happy with it. It can be used to center images and can also work with text and certain types of media (like YouTube videos.)

To get started you'll want to open your stylesheet.css file and browse to the area which holds rules concerning images. This code doesn't have to go anywhere specifically - it's just helpful to put it near all the other image related rules.

In this post we're just going to create a CSS class that's meant to handle images that appear in posts - if you're so inclined you can also use it in your general theme structure too.

Creating the CSS Rule and Using it in Posts

Unfortunately the <center> tags are out - that leaves us with a conundrum. From work on our theme we learned that we can center items using margins. By setting a <div> containers left and right margins to "auto" we manage to get the division of the page to float in the center.

We can use this same basic idea to center our images but with a tweak. By default images aren't treated as block level items - we need to change that.

To start lets create our CSS class, for this example we'll give it the name "centered." We want the class to make our image a block level item and we also want to make it centered so our code should look like this:
.centered { display: block; margin: 0 auto; }

In order to make this same code apply to both text and images we just add the "text-align: center" rule to it. The last step is simply applying the class to any image you want centered.

You can see an example below.

Balloons