Forums

This topic contains 4 replies, has 3 voices, and was last updated by  dcrish 11 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #205512

    Linus
    Participant

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

    #205515

    Paulie_D
    Moderator

    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.

    #205517

    Linus
    Participant

    Paulie_D,

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

    #205537

    Linus
    Participant

    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/

    :)

    #266911

    dcrish
    Participant

    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-link icon-logo-star icon-search icon-star