How to Center WordPress Captioned Images in a WooThemes Theme

We are very happy WooThemes customers; have been for years. About 2 years ago WordPress added support for “captions” with images inserted into posts, they end up getting a nice grayed border with the caption right under the image; it looks nice.

Unfortunately for us, 3 of the WooThemes we went through in the last 2 years (Freshnews, Canvas and 1 other that slips my mind) were never able to center the captioned image; it was always left-aligned.

After getting a confused email from one of our writers about the images not centering correctly, I decided to finally put in the time to find the fix, and I have!

Issue: The problem is that when you caption an image, WordPress wraps the image inside of another <div> block-level element with two classes assigned to the div:

class="wp-caption aligncenter"

Unfortunately, the aligncenter style is defined as:

Which will not center a block-level element in HTML. You have to assign a margin-left and margin-right of auto in CSS to center block-level elements.

Buried in one of the multiple WooTheme support topics on this issue, was a link over to a WordPress support post asking the same question but in response to another theme that was doing the same thing.

The solution is to modify the .wp-caption style class by adding left and right margins of auto to it. You can easily do this with any WooTheme theme by editing the custom.css file in the root of your theme directory, and adding::

.wp-caption {
  margin: 10px auto;
}

Which will create a top-margin of 10px, then LEFT, RIGHT and BOTTOM margin of “auto”. You could have just as easily typed:

.wp-caption {
  margin-left: auto;
  margin-right: auto;
}

To get the same centering effect for the div that eventually contains the captioned image. The result, well, it’s centered images!

If you have any questions on your own site, post a comment below and we’ll try and help.

Tags: , , , , , , , , ,

About Riyad Kalla

Software development, video games, writing, reading and anything shiny. I ultimately just want to provide a resource that helps people and if I can't do that, then at least make them laugh.

, , , , , , , , ,

3 Responses to “How to Center WordPress Captioned Images in a WooThemes Theme”

  1. ana cristina September 19, 2010 at 12:10 am #

    wonderful way to software development video games, writing, reading and anything shiny…Thanks………….!!! :)

  2. The Orange Backpack November 10, 2012 at 10:18 pm #

    OMG! Thank you it worked perfectly!!!

Trackbacks/Pingbacks

  1. How to Center WordPress Captioned Images in a WooThemes Theme … | Manually Chosen Best Free WordPress 3 Themes - September 15, 2010

    [...] review more: How to Center WordPress Captioned typical examples in a WooThemes Theme … [...]

Leave a Reply


8 − = 5