New CSS for aligning images, block elements and captions

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;
}

.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;

}

Murk

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/
Murk

(works fine on img not in a div)
DanGarion

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

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.
Ryan

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’.
Chris Brennan

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

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

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

Thanks! I needed that 🙂
Alexa

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 –
Milan

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 🙂
Luis

Thank you, It worked for me.
-Luis
Tcmo6

Best solution. Great work! keep up!
Andrew

Worked like a charm, thanks for the code 🙂
James Pearson

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!

New CSS for aligning images, block elements and captions

Author: Miriam Schwab

Read previous post:

WordPress 2.7 heavily based on existing plugins