Floating Images within the post in WordPress 2.6

by · October 16, 2008

The text editor that comes with WordPress 2.6 has some interesting things added.
When you have images within the content, you can float them inside the post so that the text wraps around the images properly. You can align the images to be “left”, “right” or “centered”.

 

When you use the text editor to align the images, WordPress adds class=”alignleft”, class=”alignright” or class=”aligncentered” to the ‘img’ tags or its surrouding ‘div’ element, when you choose left, right or center alignment for your images.

The post looks aligned to the left, right or centered within the WordPress admin area, but when you see the post on your site, it may not look properly aligned. It is because the theme that you are using, may not be aware of those classes added by WordPress.

How do you make your site’s theme to be aware of these classes?

You have to add the style definitions for these classes in your current theme’s stylesheet.?Open your style.css in your Theme Editor [Login to your site and click on Design -> Theme Editor].? Add the following code to the end of style.css.

img.alignleft, div.alignleft
{
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright
{
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter
{
text-align:center;
margin:0 auto;
}

Add a Comment