WordPress Picture Alignment Secrets

This picture is aligned to the left of my content. Usually we display pictures to the left or right and have our sentences wrap around it. Try to make your paragraphs longer or reduce the size of the picture to make it look good when wrapped around the text.

If not it might mess up the layout of your post. What I am trying to do right now is typing in filler text to illustrate my point. The good thing about WordPress’ built-in media upload function is that it has 3 sizes for you to choose – thumbnail, medium and full size. The picture on the left is the thumbnail-sized picture, which I further reduced in size to match the content of this post.

This picture is now aligned to the right of my content. The trick in aligning pictures is to have enough space to the left or right. In this case, I have enough space right above this paragraph to squeeze in a picture on the right. I used the thumbnail-sized picture and left the size untouched.

This picture is now aligned to the centre of the page. There isn’t any room to display text on the left or right if you choose to display your pictures in the centre. The picture below is the medium-sized picture that WordPress generated for me.

If you did something similar in your WordPress blog and it did not align like my pictures above, you must have forgotten to add some WordPress CSS code into your CSS style sheet. WordPress didn’t tell you that, did they?

Add this code to the style.css of your WordPress template to enable these WordPress alignment features in your blog:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/* IMAGES */
img.alignleft
{
float: left;
}
 
img.alignright
{
float: right;
}
 
img.aligncenter
{
display: block;
margin: 0px auto 0px auto;
}

That’s it! Once you have this block of CSS code in your style sheet, you should be able to align your pictures in WordPress properly.

The WordPress Align Center Bug?

I find this “bug” rather interesting. Maybe it isn’t a flaw in WordPress but it was way this way. Okay, here’s the thing about this align centre feature…

When you try to align your picture to the centre the first time, WordPress adds some HTML code that looks like this:

1

<img src="http://whatever.com/picture.jpg" class="aligncenter" />

If you try to align your picture to the centre for the second time, WordPress adds more HTML code and it looks something like:

1

<p style="text-align: center;"><img src="http://whatever.com/picture.jpg" class="aligncenter" /></p>

Notice the extra P HTML tag that is added to your HTML code. Strange isn’t? Well, if you have added the block of code above, you don’t have to worry about centre aligning 2 times just to get your picture to align to the centre of the page. It sounds silly but that was what I did before I knew what WordPress actually adds to the HTML code when you try to centre align stuff.

P.S. This picture is really nice “Kodak” moment of 3 of my 4 cats. The cat lying down with the back facing the front is Mini. The kitten on the left is Coco and the other kitty on the right is Moca. All my cats have names with 4 letters and I try to give them a cool and “yummy” name.

Tagged As: Cascading Style Sheets, CSS, css alignment, Style sheet, Templates, Themes, WordPress, wordpress alignment