Center Figure with Right-Aligned Caption?

[pixeldroid]

Hello:
I am using the <figure> element with <figcaption> to display images/captions on a WP Site. I want the image to be centered in the post and the caption to be right aligned under the image. The problem I’m unable to solve is that the margins on the image cause it to fill the whole width of the parent container, so when I use ‘float: right’ on the caption, the caption is aligned to the right edge of the parent container (in this case a Genesis Text Widget). What I’d like to do is get the width of the <figure> to scale to the image with the caption right-aligned under the image. I’d also like to center the figure on the page.
Any suggestions will be appreciated.
Thanks.

[ronpat]

Do you have the page set up on a test site? If so, could you post a link to that site?

We need to see the code.

[pixeldroid]

Sorry about that. I’ve uploaded a copy here.
The <figure> includes the pic of the breastfeeding baby and its caption. I’d like to have the picture centered in the section and the caption right aligned underneath.
There is a thin gray border around the <figure>, <figcaption>,and "figure img" so I can see what is going on.
Thanks much.

[ronpat]

The gray borders are a helpful touch

I’m not clear about the right-alignment of the caption, so let me ask if this is what you want?

If so, this should do it:

(line 86)

figure {
    margin: 0;
    text-align: center;  /* ADD Me */
}

(line 275)

figcaption {
/*    float: right; /* Delete Me */
    font-size: 10px;
    margin: 10px;
    text-align: right;  /* ADD Me */
}

[pixeldroid]

You’d think I’d know by know that a picture is better than a description…
This is what I’m looking for (Image/Caption unit centered in div):

[ronpat]

That’s what I was unsure about

Give this a try and see if it suits you. The line numbers come from FireBug. You may need to be more specific so these changes do not affect other figure boxes.

(line 86)

figure {
    display: table;  /* ADD Me */
    margin: 0 auto;  /* ADD Me */
}

(line 275)

figcaption {
/*    float: right;  /* Delete Me */
    font-size: 10px;
    margin: 10px 0;  /* ADD Me */
    text-align: right;   /* ADD Me */
}

EDIT:

You may consider deleting this rule from line 270. With the above changes, it seems to be useless.

figure img {
    display: inline !important;
    margin: 0 !important;
}

[pixeldroid]

Perfect!
Thanks a lot!