Ads By Google

Align Image In Post WordPress 2.7

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 an image with a caption

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.

Share This Post
Ads By Google
 

Free Updates

Subscribe to receive Free WordPress Theme Tips, Reviews and Discount Codes

Related WordPress Theme Tips

How To Align Your WordPress Quotes Left Or RightImage via Wikipedia Sometimes we will want to quote some phrases to make it more outstanding so as to grab the attention of our readers. Of course in WordPress there...

How To Align YouTube Videos In WordPress PostUnder normal circumstances, when we want to align images, WordPress will give us the options when we upload the particular image. On the other hand, if the image source is...

Add Text And Image Shadows To Your WordPress PostTo add shadows to your text in your WordPress blog, all you need is a simple line of code. It works with all major browsers except Internet Explorer, which not...

Inserting A New Header ImageI said before that I don’t like to mess with header images for WordPress Themes that does not comes with any header images. Themes like this one that I am...

Display Thumbnail Images In Post ExcerptsMaybe for some reasons or another, you do not like to use plugins to display images in your post excerpts. Using plugins do have limitations. For one, you cannot control...

Those who found this page were searching for:

  1. margin: 0 7px 2px 0;
  2. code to align banner in wordpress
  3. image alignment wordpress video
  4. how to align text with pictures thesis
  5. how to align images on wordpress
  6. image is not aligning in wordpress
  7. wp-post-image align
  8. wordpress align image top right
  9. alternative a theme my login wordpress
  10. p img{padding center

6 Responses to “Align Image In Post WordPress 2.7”

Read below or add a comment...

  1. Ryan says:

    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!

    • Costa says:

      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.

  2. Andres Vivas says:

    Thanks a lot, this fix corrected my issue with the images. I truly appreciate it!!!

  3. Tiffany says:

    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!!

  4. Ed says:

    Code worked a treat, thanks. The theme I am using is really kicking now.

Trackbacks

  1. [...] for visiting!UPDATE: If you are using the new version of WordPress 2.6 and above, check this post: Align Image In WordPress 2.7 A lot of WordPress Themes don’t include the functions to align images, something which I find [...]