July 25, 2015 at 10:44 pm #205512
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 :)July 25, 2015 at 11:51 pm #205515
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
figurehas it’s own element for this…a
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-blockbut floating works too…and nowadays
flexboxget’s it done as well.July 26, 2015 at 1:51 am #205517
Thank you very much. I was able to align my images (with their captions underneath) side by side with your help!July 26, 2015 at 11:13 am #205537
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/
:)February 13, 2018 at 6:24 am #266911
Thank you. This was very helpful.
You must be logged in to reply to this topic.