Many people have run into a problem when they try to center their images or have the images float to the left or right of the text. This is a common problem with many themes. After the break is a scenario that describes the problem followed by the solution to get your theme to play nice with your aligned images.

The Problem

You’re writing a new post, and you decide to spice this one up by adding a neat image. It’s not a full-width image, so you decide to float it over to the left and let the text flow over it. “That would look great,” you think.

You start writing the post, you add the image, and you set it to align to the left. You look at your new post, and it does indeed look great.

You then publish the post all exicted to see you new fancy post. It doesn’t look great. It actually looks really bad. What happened?

What happened is that your theme doesn’t have the CSS settings needed to allow your pages to render properly based on how WordPress aligned your images.

The Solution

There are three classes that WordPress uses to align those images: centered, alignleft, and alignright. If your theme doesn’t have definitions for these classes or doesn’t properly define them, your aligned images will look a lot like the image above.

The following CSS can be added to your theme’s style.css file to add the CSS settings that the default theme (Kubrick) uses for image alignment:

/* Begin Images */

/* Using 'class="alignright"' on an image will
   (who would've thought?!) align the image to
   the right. And using 'class="centered', will
   of course center the image. This is much
   better than using align="center", being much
   more futureproof (and valid) */

img.centered {
        display: block;
        margin-left: auto;
        margin-right: auto;
        }

img.alignright {
        padding: 4px;
        margin: 0 0 2px 7px;
        display: inline;
        }

img.alignleft {
        padding: 4px;
        margin: 0 7px 2px 0;
        display: inline;
        }

.alignright {
        float: right;
        }

.alignleft {
        float: left
        }
/* End Images */

Of course you can modify this to meet your own specific needs. At a minimum, you need the following in your style.css file:

img.centered {
        display: block;
        margin-left: auto;
        margin-right: auto;
        }

.alignright {
        float: right;
        }

.alignleft {
        float: left
        }

After adding the default CSS styling from the Kubrick theme to my theme’s style.css file, my post now looks much better.