Centering the text in your captions
Hi All, I have been struggling trying to get the captions for my pictures centered. In the previews it has been centered but when I look at the published post the text is always left justified. I have been looking for something in the discussions with no luck.
I found a solution this morning. There is a bit of code you can add to the bottom of your styles.css file. Try this if you have this problem.
Go into Build My Website > Dashboard.
Go into Appearance > Editor
On the right hand side you will see the list of all the php files. Scroll to the very bottom of the list and you will find a Styles section. It should look similar to:
Styles
Stylesheet
(style.css)
Click on Stylesheet and copy and paste the block of code at the end of the post into the very bottom and click update file. It doesn't matter where you put the code in the css file but I put it at the bottom so I can find it if need to go back to it. I believe the code is tweakable but for me it looks just fine. The text is now centered and the font is more distinguishable from the rest of the content's text:
.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;
}
Recent Comments
30
Thanks for this and all others who commented with other options! All of you get a shift star!
Ken
Thanks for sharing. An alternative is to click on the image and fill in this in the caption area
It works fine. Here is an example - back of the site http://d.pr/i/794w - front of the site http://d.pr/i/3jgQ
I guess set it once and forget for all or do them individually as you go are the options then as you said
Thanks. It would be nice if you could give me short info how you get the caption underneath the images
John
Jaweda2k nailed that one down here:
https://my.wealthyaffiliate.com/training/tips-tricks-with-adding-images/adding-captions-to-images
I just added a caption and it centered itself without me having to something special. I guess it depends on the Theme. I found similar code in the style.css
John
You may be right. I guess it is good ammo for the themes that we do have a problem with. Thanks for the update.
The code didn't turn out very good so here it is with better formatting:
*****copy everything between here*****
.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;
}
*****And here*****
See more comments
Ok, so ever since I added this, my captions are now centered but my pictures aren't. They look centered in wordpress but it's no longer centered on the actual page. see example here:
http://www.babyrazz.com/walmart-baby-cribs/
do you know what I am doing wrong?
So it looks like they are left justified? I have not experience a side affect. If you highlight the picture and click on the center icon in the tools on top does that help? Have you tried changing it from left to right then back to center to see if it moves around?
Yes it's centered to the left, so weird it's doing that. I tried what you suggested and no luck. So now I'm not sure if I should have no captions and let the pick be centered or leave on the captions and have the pic be off centered to the left
I would try removing the code to see if centering works again. If it centers properly then it is the code doing something weird with your theme. If it doesn't change then there is something else going on. Was your centering ok when yu first put in the code I suggested?
There was something that James sent our a while ago about centering pics that are being difficult. I am looking for the link. When I find it I'll send it to you
No it's been that way since I put it in. I only have a few pics that are centered, most are too the right of text, so I didn't notice right away.
Ok, thank you!
I removed that code and pics are centered but the words are not :-( I really like the way the pics look with the code, I just wish I could figure out why a few of them aren't centering.
It may be this piece of the code that isn't agreeing with your theme.
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
I don't have any images centered. I'll try one and see. I'll let you know. If you want you can try putting the code back in except for the piece above.
Got it. If you make your code look exactly like it is below you should have your text centered with the nice font and the image should stay where it is supposed to. It was doing the same for me. I just didn't notice because I had no images centered. If you took the other code out just put this block in instead and you should be good.
.wp-caption {
border: 1px solid #ddd;
text-align: center;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
Yes that worked!! Thank you so much for your help!!
Great!! Good to hear. Enjoy