Fix Image And Captions Alignment Issue in Old WordPress Themes

WordPress has changed a lot since its earlier releases. Starting from version 2.7 of WordPress, you can now automatically align images left, right, centered or none, while inserting them in the post,

solve-image-alignment-problems-in-wordpress

This works because WordPress automatically generates styles for images based on the alignment chosen by you, and then the image is aligned based on that style definition. For instance, if you center align the image, the output will be,

<img class=”aligncenter” src=”your-image-source” />

All the new WordPress themes include styles for these classes. However some old themes doesn’t aligns images automatically because they lack styles for these classes. To fix these themes, add the following code in their style.css file,

img.aligncenter {
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;
}

This will fix all the issues like images not centered or not aligning correctly in WordPress.

Another new feature that comes with wordpress 2.7 is automatic insertion of image captions while posting the image.

solve-caption-alignment-problems-in-wordpress

This is a great feature as you can add descriptions or copyright credits as captions. You can use captions even with old WordPress themes but that will not look good since it will just add some plain text below the image which is not aligned properly. To make the captions look great, like this,

A Caption
A Caption

Add the following styles to the style.css file of your wordpress theme,

.aligncenter, div.aligncenter
{
display: block; margin-left: auto; margin-right: auto;
}

.wp-caption
{
border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}

.wp-caption img
{
margin: 0; padding: 0; border: 0 none;
}

.wp-caption p.wp-caption-text
{
font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0;
}

This will fix all the issues like caption text not centered or not aligned properly.

Note that all the new WordPress themes already contain these styles. You need to use them only if the images or captions are not aligned properly.