Fixing Image Alignment in WordPress

by Paul Wilson

 

03-17-09_wordpress-themeI help develop a lot of custom wordpress themes (you can see some of my work in the gallery). One common mistake that a lot of developers make is having images in post be styled according to wordpress standards. Case in point, the theme for MyMarketer is a free theme. When I tried on the theme all the images in my posts no longer held their formatting.

I came across this problem with one of my freelance projects and asked the developer of the project his thoughts. Here is the email he sent:

Actually we need to add extra CSS classes for customized themes, so the final CSS rules would be:

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
}

So, I took this code and plopped it into the CSS of the theme I was testing on MyMarketer and it worked like a charm. I know every theme has different styling but this should work 99% of the time. ~Paul W.

Related Posts: