Figcaption – Position an image independently from a caption?

[MBM]

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.

http://mbmitservices.co.uk/caption_issue.png

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.

email

facebook

linkedin

07975564706

.contact {
float:left;
font-size:18px;
margin-left:80px;
margin-right:80px;
padding-left:20px;
}

.phone {
float:left;
margin-left:20px;
padding-right:20px;
font-size:18px;
}

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

[MBM]

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

[Paulie_D]

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

No?

[MBM]

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

[MBM]

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.

[chrisburton]

@MBM Solved: http://codepen.io/anon/pen/lwbut

[MBM]

You are awesome! Thank you very much!

[chrisburton]

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

@andy_unleash Thanks for the initial markup.

[wolfcry911]

I updated Andy and Chris’ pen a bit further – no need for the before pseudo class…
http://codepen.io/wolfcry911/pen/sGjpC

[MBM]

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

[joshuanhibbert]

Lists have to have list items as their immediate children. Here is a working solution using what has already been done: http://jsfiddle.net/joshnh/LK9jG/

[wolfcry911]

this pen is updated (similar to Joshua’s)
http://codepen.io/wolfcry911/pen/sGjpC

note the anchors are display block, allowing for larger clickable area. Also note the background image could be placed on either the anchor or the list item (I’ve done two of each).

[MBM]

Thanks. Valid and aligned perfectly in all browsers (in desktop mode).

[Author]

Posts