More than a year ago, I posted the stylesheet codes for aligning images in your WordPress posts. Times have changed and WordPress has added many new advanced features. One of them is the ability to align your images perfectly when you insert your image in your post editor. The only thing is the old codes which I posted the last time do not seem to work with the newer version of WordPress. So I went a digging and did some investigation. Studied the codes in the default theme that came together with WordPress 2.7. This are my findings.
To have your images aligned properly in WordPress 2.7, and your theme is an old one that is not compatible with 2.7, you need to and this few simple lines only. (UPDATED)
p img {
padding: 0;
max-width: 100%;
}
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
}
Copy those codes and paste it in your stylesheet, anywhere that you find appropriate. When inserting images during posting, select your alignment preference and your image will appear perfectly aligned.
This is how an image with a caption looks
Another feature that comes as default is captioning your images. This is really a cool feature as it allows you to add a short description to the image or maybe add in the copyrights credit to the owner of that image. You can still use this feature in any theme but the captioned image will be just a plain looking one. To make the iamge more elegant and classy with the captions aligned nicely at the bottom of the image, add these codes to your stylesheet.
/* Captions */
.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; }
/* End captions */
It will result in the iage looking like the one shown here.
Hi Ah Pek,
I know you’re a popular man around the WP forums, so I thought I’d see if you can work out the kink in my image-align issue:
I have tried about EVERY solution I could find on all the forum sites concerning this, but nothing’s worked yet. Here is a prime example of my problem:
http://www.epochsy.com/2009/01/27/edletwinter08/
The David Bowie quote is meant to be centered, but obviously, is not. Here is what my style.css currently looks like:
/*img.alignright { float:right; margin: 0 0 1px 5px; padding: 2px;}
img.alignleft { float:left; margin: 0 5px 5px 0; padding: 2px;}
img.aligncenter { float:center; margin: 0 5px 5px 0; padding: 2px;}*/
/*This works to RIGHT align images, but not centered ones!!!*/
img.alignleft, div.alignleft {
float:left;
margin:2px 2px 2px 0px;
}
img.alignright, div.alignright {
float:right;
margin:2px 0px 2px 2px;
}
img.centered, .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
/*img.centered, .aligncenter, div.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;
}*/
If you can help me I would be infinitely grateful. I’ve been trying to fix this for about 3-4 hours, and if I can’t fix it by tomorrow night, my head might explode.
Thanks!
Ryan,
Are you using WordPress 2.7? Some themes simply do not comply but what I can suggest is that you remove all those old image alignment codes and replace them with these
p img {
padding: 0;
max-width: 100%;
}
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
}
Can’t promise anything as like I said, some themes simply do not work with 2.7
Do save up your old stylesheet before messing with it though.
I’ll update the ones I have posted above.
Thanks a lot, this fix corrected my issue with the images. I truly appreciate it!!!
I just wanted to tell you – thank you, thank you, thank you for this fix! I was feeling so frustrated with my image alignment after a wordpress upgrade and your code fixed it perfectly after days of searching for a solution. Your time is appreciated! Thanks again!!
Code worked a treat, thanks. The theme I am using is really kicking now.