WordPress plugins, themes, tips and hacks

New CSS for aligning images, block elements and captions

August 19, 2008 – 11:19 am | by Miriam Schwab

I was recently working on a WordPress site, and I just couldn’t get my images to left-align with the text so that the text would wrap around it. It was wrapping in the text editor in the admin, but on the front end the image stuck out of the top of the text.

Rebecca, our genius Web Project Manager at illuminea, did a search and discovered on the WordPress Codex that a bunch of new styles are needed in your style.php file in order to get the images to do what you want from WordPress version 2.5 and up. If you are using an older theme, you may not have these styles in your style sheet. The same classes are used to align images that have a caption (as of WordPress 2.6).

Here are the styles – you can just copy and paste them into your style.css file or wherever your CSS styles are located:

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

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -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;
}
[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

  1. 15 Responses to “New CSS for aligning images, block elements and captions”

  2. By Murk on Aug 19, 2008 | Reply

    heh, you posted this literally half an hour after I did essentially the same code from scratch!

    I’ve not got the centring on the divs working though, it was really frustrating.

    Can’t work out what’s going on myself – ah well, not the end of the world.

    http://www.murky.org/blg/sprint-finals/

  3. By Murk on Aug 19, 2008 | Reply

    (works fine on img not in a div)

  4. By DanGarion on Aug 19, 2008 | Reply

    Thank you very much!  This helped me with the frustrating issue that popped up in 2.5.  Works in the Revolution free theme.

  5. By Brandon Cox on Sep 1, 2008 | Reply

    Thanks – I’ve used other methods to simply get rid of the caption text (display:none;) but this works much better. I can’t wait until WordPress just makes the caption optional. It has surprised me that they’ve made this automatically generated since it forces something into the design of a site. Ought to be an option.

  6. By Ryan on Sep 22, 2008 | Reply

    Holy cow! I never realised that WordPress supports captions till now. That is awesome as I’ve traditionally had to add them with HTML in the code view. Having them as a default feature is much better and will save the hassle of heading to code view all the time.

    The alignment options have been around for a while now (WP 2.5 I think) and were desperately needed as the only way to do it in the wysiwyg previously was to let it add align=”left”, align=”center” or align=”right” to your IMG tags which is a total nightmare if you are a semantic HTML pedant.

    Brandon Cox – The caption text is not there by default. You have to add a caption to your image before WordPress will add any extra HTML to your site. Don’t use CSS to remove them unless you want them left there for SEO purposes. You can easily remove them in the WP admin panel by removing the [caption] short tags in ‘code view’.

  7. By Chris Brennan on Sep 27, 2008 | Reply

    Thank you so much for posting this code!   I just did a new install of wordpress and I was rather baffled by the problems that I was encountering in trying to get the image to align correctly.    Thanks a lot!

  8. By Nancy on Oct 30, 2008 | Reply

    THANK YOU!  I pulled out a bunch of hair trying to fix this issue on a friend’s blog.  Your code worked perfectly.  Appreciate the post!

  9. By Miriam Schwab on Oct 31, 2008 | Reply

    @Nancy: I’m really glad this post helped you! That’s what we’re here for, and knowing that our work helps others helps us keep going, so thanks for the thanks!

  10. By Lori on Nov 5, 2008 | Reply

    Thanks! I needed that :)

  11. By Alexa on Nov 13, 2008 | Reply

    Do you have an example of what these captions will look like?  I’m trying to match the image css of my theme in WP but I want the captions to be *within* the white block and inside the border – they are (with my own code as of now) only appearing outside.  Thanks for your help -

  12. By Milan on Nov 25, 2008 | Reply

    OMG! thank you so much, just what I was looking for. Spent an hour trying to figure this out. The image was not even moving, no matter what I do.

    Now, well they are just the way I want them to be.

    A+

    Thanks
    Milan :-)

  13. By Luis on Dec 3, 2008 | Reply

    Thank you, It worked for me.
    -Luis

  14. By Tcmo6 on Feb 11, 2009 | Reply

    Best solution. Great work! keep up!

  15. By Andrew on May 20, 2009 | Reply

    Worked like a charm, thanks for the code :)

  16. By James Pearson on Jun 20, 2009 | Reply

    Thanks so much for this. I created my own theme and have been manually editing the html of every image to make it centred until now! I kept meaning to find a solution and when I finally did I found your post, which has solved the problem. You’ve saved me a lot of time – thanks again!

Post a Comment

Revolution Premium Themes