Now I See Why the WordPress Image Align Feature Was Not Working

There is one WordPress feature that was introduced with version 2.5 that always made me curious: the image alignment feature of the “Add media” editor. Why? Because it never worked!

I knew that I was probably doing something wrong, but since I didn’t have time to find it out, I just kept choosing “none” as the alignment, and then I would manually insert the right, left or center alignment attribute on the image tag.

Then last week when I was submitting one of my themes for the WordPress Themes Directory I got a message saying that since version 2.5 WordPress themes were required to have the following code on their stylesheet:

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;
}

Duh! That is why the alignment feature was not working on my blogs, I never added that code! Now if you faced this problem in the past, now you know how to solve it.

Daniel Scocco on August 13, 2008 Subscribe to our RSS Feed

Got the Internet Marketing Newsletter?

My analysis of the industry
The latest trends and opportunities
Tips and tricks that I use on my sites
It's free!

Bookmark

47 Responses to “Now I See Why the WordPress Image Align Feature Was Not Working”

XIII on August 13th, 2008 8:26 am

Big doh moment, thanks for the tip. Me thinks WordPress themes seem to have a hard time keeping up with new WordPress features.
David Lau on August 13th, 2008 8:35 am

Thanks, i got the same headache problem,and now it’s working~
Arjen on August 13th, 2008 9:34 am

Thanks! I’m going to add these code to my theme.. have been wondering why it wasn’t working!
Stephen on August 13th, 2008 9:49 am

I better go check my theme’s stylesheet. Mahalo for the info.
DjFlush on August 13th, 2008 10:12 am

lol and I kept thinking this was a problem with my blog only. Thanks Daniel! It works
Dean Saliba on August 13th, 2008 10:39 am

I had this same problem, thank you for the solution.
stetoscope on August 13th, 2008 11:07 am

GREAT, I HAD THIS PROBLEM TOO.
THANK YOU VERY MUCH

(DO YOU HOW TO WRITE WITHOUT CAPS ;-)))
Ellie on August 13th, 2008 11:32 am

Thanks so much, that was an annoying problem.
Todd Andrews on August 13th, 2008 12:02 pm

Wow, I’ve been coding a work-around for this for a while now. They need to make this standard with all WP themes someday
Brad Blogging.com - Personal Blog Tips And Blog Help on August 13th, 2008 1:10 pm

It was so annoying adding an “float:left;” to each one of my pictures.

Thanks for the code!
Annie on August 13th, 2008 3:27 pm

AHA! That’s the problem! Thanks for sharing the proper code. Now, where exactly do I put it? I’m just beginning to learn about this stuff . . .

Thanks!

~ AA
Rick on August 13th, 2008 4:56 pm

I actually caught this myself. I always compare the latest default theme with the previous one. That way I catch any theme updates I need to propagate to my theme (which is based on the default).
Allyn on August 13th, 2008 5:28 pm

OK, so I am the only one who does not know where in the stylesheet to put that code.
does it matter where you put it?
help!
thanks,
AL
Hillary on August 13th, 2008 7:22 pm

Oh man!!! Thanks for sharing this, what a time-saver.

Like you, I’ve been aligning my images manually. Lol!
Ari on August 14th, 2008 12:22 am

Thank you Daniel, it really helps.
@ Annie, you need to put the code at stylesheet file of your theme on the content section.
Michelle on August 14th, 2008 4:31 am

Daniel, you’re an absolute star. I’ve been struggling with this issue for months!
David Hutchison on August 14th, 2008 4:34 am

Thank you! There doesn’t seem to be a blogging question that can’t be answered by our supportive community - quietly working alone at home, yet I don’t feel isolated.
EL Locco on August 14th, 2008 4:59 am

Yach, really I like this article. Thanks for this nice article
parisb on August 14th, 2008 5:14 am

I’m wondering where to place this too? I’m using the passionduo theme and the images aren’t aligning. Thanks for any help.
Daniel Scocco on August 14th, 2008 8:24 am

@Parisb, open WordPress CP, then Design, then Theme Editor, then open style.css file. Place it there.
pandu on August 14th, 2008 11:00 am

oh…gosh, i always find difficulties when aligning image on my blog. you’re really ‘the daily blog tipper’, man…muchos gracias!
parisb on August 14th, 2008 11:04 am

@Daniel: Thanks. I did try that immediately when I saw this tip. It still isn’t working though. Is there a specific part of the stylesheet it should go into? I’m still aligning my images manually
BloggerNewbie on August 14th, 2008 11:34 am

Well No duh here cause it’s all news to me, except the part that the alignment never worked, too much of a newbie to even begin to know how to work on it. I’ll check it out and report back on my success (positive thinker)
Melodee Patterson on August 14th, 2008 11:53 am

I hate to say all those hours I spent figuring out how to align my graphics were a waste, but, doh!

Thanks!
Jodith on August 14th, 2008 6:35 pm

*nods* I just had to have that fight with my theme last week (when I finally updated to 2.6 from 2.3.1). Drove me crazy getting it figured out, but I finally got it in there and can now float my text around my images.

And there was much rejoicing!
خسروبیگی on August 16th, 2008 6:57 am

Hello

Thanks for your solution. I had this problem too and your post help me.

Regards
Coder on August 16th, 2008 9:08 pm

I never had this problem..
Don’t know why?! LOL
BloggerNewbie on August 18th, 2008 7:48 am

Daniel:

worked! (no surprise) Saved a ton of work! Sometimes I use scribefire which lets you position graphics a little better. It has it’s benefits and drawbacks.

Thanks. Always helpful.
Schrottpresse on September 5th, 2008 4:35 pm

Thank you very much for this solution, I really was confused with all of the align functions on the button bar, none of them working ^^
Beno on September 8th, 2008 5:31 am

I was doing a Google search trying to find out why WordPress wasn’t doing the right thing by default and I came across this post.

Thank you for sharing.
Kristen on September 8th, 2008 7:21 pm

OH THANK YOU! I have been so frustrated with this topic and just adding that code to my stylesheet automatically fixed my images.

THANK YOU THANK YOU THANK YOU
BloggerNewbie on September 9th, 2008 10:45 am

Daniel:

big help! got any clues on the post at a future date feature? When I set a future date, the post goes out into never never land not to be seen ever again!
Avigail on September 13th, 2008 7:01 am

Hello,

thank you for sharing. It works without any problems. I was driving me mad I thought that I can just use new wp themes, but just pasting the code into the stylesheet works!

Avigail
Saeed on September 25th, 2008 12:56 am

I have used this code to align my images perfectly on my blog. However, in the RSS feed reader, e.g. Google Reader, they still don’t float properly. Has anyone else been having the same problem as well? If so, were you able to rectify it? Please share kindly!
Tobias Goth on September 27th, 2008 12:21 pm

Big Thanks! I was starting to think that my version of Wordpress was bust, but you made me think other wise.
Dusibello on October 2nd, 2008 1:00 am

No joy here.

Does the code need to be pasted into a certain section of the stylesheet file?
Susan on October 2nd, 2008 9:46 am

thank you!
Andy on October 8th, 2008 4:45 am

Fantastic! I thought I was going mad after the upgrade to 2.6 on my blog none of the image alignment worked for new images in posts.
You have saved me bacon. Cheers!
Stefan Wurz on October 12th, 2008 6:29 am

Yeah, really I like this article. Thanks for this nice article
Sebastien Page on October 28th, 2008 3:14 am

Thank you for saving me a time. It’s been driving me nuts for an hour until I came across this post! Thanks
Tim on November 1st, 2008 1:50 am

THANK YOU SO MUCH FOR THIS.

This was driving me insane.