Modify Your WordPress Theme to Align Images

I learned something new the other day while reading through the WordPress Codex which provides information on how to manipulate wordpress code behind the scenes and provides you with the tips and information you would need to create your own custom theme. I am not a programmer, coder at all actually, what I can do is take something that exists and tweak it here and there. What I wondered was why on some of my blogs the images would align perfectly, when I chose “Alignment Left” or “Alignment Right” when inserting images into posts, the text would properly wrap around the image.

This blog however previously, when I aligned an image left or right, the text wouldn’t wrap around the image but would just show up next to the image at the very bottom, it was very unpleasant cosmetically which is why I generally just centered all of my images.

Then I learned that starting in WordPress 2.6 or later, wordpress allowed designers to easily add some css code to the style.css that would automatically align images to left/right and allow text to wrap around images. I figured this blog’s theme must have been around prior to WordPress 2.6 so I decided to add the following lines to my style.css:

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

.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
float: right;

.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
float: left;

Once I added those lines of code into my style.css (Stylesheet) for wordpress, all of my images now automatically and properly set themselves when I choose to align them left, right or center.

BugWarWith this code now when you align an image to the left, it will show up to the left of your text, with your text properly wrapping around the image as you see with this image to the left here. It was so simple to do this, I can’t believe it took me so long to finally search through the wordpress codex to figure out how.


Also now if I insert an image and select align right, the image will be on the right side of my post with the text wrapping around to the left as is demonstrated by this line of text, this allows you to embed smaller images into your post to add flare and help break up the monotony of too much text. I have always liked the appearance of images small and aligned with text wrapping while reading blog posts personally.


If you have trouble with your wordpress theme not aligning images left or right the way you like them you can insert the lines of text above to make your images align and float so that text wraps around them properly. You can also tweak the code above and make a smaller or larger padding which is the invisible border around the image, make sure you have at least some padding or else the text will touch up against the image and make it harder to read and a little more unpleasant to look at.

-Dragon Blogger

Share Feedback We Want to Hear From You