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;
}
Category: CSS
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/
(works fine on img not in a div)
Thank you very much! This helped me with the frustrating issue that popped up in 2.5. Works in the Revolution free theme.
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.
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’.
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!
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!
@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!
Thanks! I needed that
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 -
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
Thank you, It worked for me.
-Luis
Best solution. Great work! keep up!
Worked like a charm, thanks for the code
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!