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!