[Solved] Aligning Images with Captions Underneath Side-by-Side

[Linus]

Greetings!

I’m trying to align images that have text underneath side by side. I have been trying to do this for a while now but I can’t seem to do it. Can anyone please help?

So far, I was able to get images to be right next to each other (inline) but the captions of the image (which I want to be underneath the image) is actually to the immediate right of the image (which is not what I want).

Any help is much appreciated. Thanks.

P.S. I’m new here :)

[Paulie_D]

It’s hard be specific without seeing your code but the point here is to pick the right elements, and HTML structure, for the job.

So, you want the images and captions to stay together…then we need to wrap them in something…a div will do although I prefer a figure ..and the text could be any text element but again, the figure has it’s own element for this…a figcaption.

So, if we use that you can then use any technique you want to get the wrapping elements to shrink-wrap around the image and associated caption…I prefer display:inline-block but floating works too…and nowadays flexbox get’s it done as well.

http://codepen.io/Paulie-D/pen/Wvaywo

[Linus]

Paulie_D,

Thank you very much. I was able to align my images (with their captions underneath) side by side with your help!

[Linus]

Also, thanks for bringing to my attention about the flexbox which I am reading about right now at https://css-tricks.com/snippets/css/a-guide-to-flexbox/

:)

[dcrish]

Thank you. This was very helpful.

[Author]

Posts