January 24, 2009 | In: Wordpress

WordPress Image Caption CSS

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

TRADE YOUR VIDEO GAMES AT Tradeomics.com!

Tags: css

31 Responses to WordPress Image Caption CSS

April 14th, 2009 at 3:32 pm

Thanks for this. I was having a devil of a time trying to make captions look right!

GG’s last blog post..Missionary Dating

Brian Jarrett

July 22nd, 2009 at 10:44 am

Fantastic post! I’ve been trying to fix my image captions for some time. This was perfect.

BrianJarrett.com » Blog Archive » Image Captions

July 22nd, 2009 at 11:18 pm

[...] finally got image captions working properly for my custom WordPress theme. I found the CSS here and I’ve included it below for [...]

Robert McIntosh

July 30th, 2009 at 12:01 pm

thank you!

I’ve been struggling with this for ages. What a marvelous help

Christoph Jochum

August 6th, 2009 at 3:26 pm

Great!!!
I´ve been messing with this for days without success.
Thank you

otholate

October 17th, 2009 at 9:06 am

thanks a lotfor this. works like a charm.

Grace Sica

November 5th, 2009 at 8:00 pm

Awesome! Thank you!!!!

El desalmado

November 16th, 2009 at 12:26 am

great, i need this good

Stu

January 30th, 2010 at 12:28 am

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!

Ryft Braeloch

February 2nd, 2010 at 2:22 am

That’s the CSS. What’s the HTML?
.-= Ryft Braeloch´s last blog ..Quotables: Dennis Prager =-.

Trey Connell

February 2nd, 2010 at 8:53 am

Hey Ryft – it’s just the standard html that WordPress generates behind the scenes when you insert an image in your post.

February 2nd, 2010 at 10:57 pm

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

February 3rd, 2010 at 9:10 am

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!

oakley

February 25th, 2010 at 6:13 pm

Perfect solution. Thanks a bunch!

February 26th, 2010 at 3:08 pm

Excellent, thank you!

Marcus Cuttino

July 3rd, 2010 at 10:11 am

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.

Doug Lipman

August 3rd, 2010 at 7:41 am

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!

August 4th, 2010 at 5:37 pm

Glad to help Doug!

Chris Jacobson

August 28th, 2010 at 3:21 pm

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 [type] ..WordPress Releases 301- Comes Out with Quick Fix

Adelemb

May 21st, 2011 at 6:27 am

Ace, just what i needed, thanks

hiren

June 23rd, 2011 at 8:18 am

hello
great helpful,
but in my site still not working caption , any solution ?

Maura McGurk

September 4th, 2011 at 4:53 pm

Do you have any recommendations for how to make multi-line captions for images, with a “hard return” where I want it, rather than just a text wrap? I’ve been working on this all day and no luck. Thanks in advance!

melissa

October 27th, 2011 at 8:24 am

hi there
I am using the plugin “Highslide 4 wordpress”.
how do I change the “font size” of the the image title?
all the css sheets of the plugin are disabled?

thank you

Varn Media

December 2nd, 2011 at 5:08 am

Trey,

Thanks for this post I had been hunting high and low for this information. I think you have saved me at least an hour fiddling around with the code.

Cheers.

Miha

December 14th, 2011 at 2:50 pm

Hi!

I have the image caption thigy all worked out in my css. BUT, is there a way to override the styling inside a page? I have everything setup like it should be, but in just ONE page I would like to change the margins around the caption.

Say i have this:

.wp-caption
{
border: 1px solid #ddd;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
text-align: center;
}

and then add this

.wp-caption1
{
border: 1px solid #ddd;
background-color: #f3f3f3;
padding-top: 4px;
margin: 50px; /* SEE this? */
text-align: center;
}

How can I make the wordpress look for this newly created .wpcaption1 instead of the default one? Can it be done?

THANX!

Tushar

December 26th, 2011 at 3:09 am

I am using Alltuts wordpress theme for my website. When i set caption to any image it does not shown at all. even that image cannot locate at center with caption. Please help me, is there any need to do with my theme CSS?