Grow your CSS skills. Land your dream job.

Figcaption – Position an image independently from a caption?

  • MBM
    # October 24, 2012 at 12:30 pm

    I have a row of icons in my footer with text underneath. As the text for the last icon contains 11 characters it isn’t in line with the image.

    I have created a second figure class for the image but still can’t figure out a way to shift the image to the right while keeping the text in it’s current position, they both move together and if I play around with the figcaption is screws with the formatting of all the captions, I only want to target one.







    .contact {

    .phone {

    Sorry for the formatting. Markdown is utter ******. Why can’t we use vb code?

    # October 24, 2012 at 12:39 pm

    Have you considered using :before instead with a CSS background?

    # October 24, 2012 at 12:43 pm

    I’m not sure how that would help??!?! I only want to move one caption or one image.

    # October 24, 2012 at 12:52 pm

    Something like this:

    # October 24, 2012 at 12:53 pm

    Or alternatively could use :after –>

    # October 24, 2012 at 12:58 pm

    I don’t understand, just make sure the image and text are centered inside the figure.


    # October 24, 2012 at 12:59 pm

    I want the text has to be positioned under each image.

    # October 24, 2012 at 1:01 pm

    Paulie_D, that’s the problem, – I can’t figure out how to do it. Three of the images and captions are aligned centrally but the last image doesn’t align with the text.

    # October 24, 2012 at 1:05 pm

    Oh now I see your code above (wasn’t there for me before) you want to align the text centrally under each image.

    Why are you using fig/figcaption for this since it’s a list in a footer anyway? Figs/figcaptions are for content areas as far as I’m aware? A ul would make more semantically sense as well as being easier to manage and style.

    # October 24, 2012 at 1:06 pm

    @MBM Solved:

    # October 24, 2012 at 1:14 pm

    You are awesome! Thank you very much!

    # October 24, 2012 at 1:15 pm

    @MBM My pleasure. I updated the pen to minimize the CSS a bit.

    @andy_unleash Thanks for the initial markup.

    # October 24, 2012 at 1:42 pm

    I updated Andy and Chris’ pen a bit further – no need for the before pseudo class…

    # October 24, 2012 at 7:53 pm

    When I add links to the elements I get the following validation error :

    Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

  • While this validates :

    I want the anchor the links around the images and text not just the text, is that possible?

# October 24, 2012 at 8:08 pm

Lists have to have list items as their immediate children. Here is a working solution using what has already been done:

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".