If you use anything other than the default WordPress theme, you’ve probably noticed that image captions look different in TinyMCE than they do on your site. This is because many themes do not include the styles associated by WordPress with the images you insert into your posts.
In order to get the styles to show up, simply paste the CSS below into your theme’s css file (style.css). That will get your default styles working, and you can customize from there.
/* 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 */
Thanks for this. I was having a devil of a time trying to make captions look right!
GG’s last blog post..Missionary Dating
Fantastic post! I’ve been trying to fix my image captions for some time. This was perfect.
[...] finally got image captions working properly for my custom WordPress theme. I found the CSS here and I’ve included it below for [...]
thank you!
I’ve been struggling with this for ages. What a marvelous help
Great!!!
I´ve been messing with this for days without success.
Thank you
thanks a lotfor this. works like a charm.
Awesome! Thank you!!!!
great, i need this good
Dude, you fixed multiple things for me with this simple CSS! Thanks so much for saving me the unending frustration of why I couldn’t center my article images or the captions weren’t turning out quite right.
Awesome stuff!
That’s the CSS. What’s the HTML?
Ryft Braeloch´s last blog ..Quotables: Dennis Prager
Hey Ryft – it’s just the standard html that WordPress generates behind the scenes when you insert an image in your post.
I guess what I mean is, “After inserting the aforementioned CSS into my stylesheet, how do I add captions to images? (I’ve been scouring the web trying to find out how to do that.)
Ryft Braeloch´s last blog ..Quotables: Dennis Prager
Ryft – Oh I see. When you create / edit a post, click the little square icon next to the “Upload / Insert” line at the top of the wysiwyg editor. You can then upload an image from your computer. After it uploads, you’ll be presented with a screen with various fields on it. One of those fields is caption. Just fill it in and then click “insert into post”.
Hope that helps!
Perfect solution. Thanks a bunch!
Excellent, thank you!
Is there a way to reduce the space between the text in the caption and the caption border. It seems as if there is too much space. Also is there a way to reduce the space between the bottom caption border and the paragraph text beneath it. It seems as if the space there is a little excessive as well. I’ve tried playing with the CSS some but no luck…I’m hoping you might be able to help me out.
Oh, thank you! I spent a couple hours trying to modify the CSS for the captions, but couldn’t find it. (The style.css file for my custom theme doesn’t contain it, and I couldn’t find what file was being called that did contain it.)
By adding the code you gave, I was able to override the other CSS and get the result I wanted.
I had nearly given up, when I happened on this page. I much appreciate it!
Glad to help Doug!
My content CSS font is overriding the image captions’ CSS and the font size and styling is the same as my content. Even when using the above CSS, the font size and styling doesn’t change. How can I override this?
Chris Jacobson´s last blog ..WordPress Releases 301- Comes Out with Quick Fix