Forums

Give help. Get help.

  • # July 25, 2015 at 10:44 pm

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

    # July 25, 2015 at 11:51 pm

    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.

    # July 26, 2015 at 1:51 am

    Paulie_D,

    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

    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

    Thank you. This was very helpful.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag