Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Images with description align

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #165909

    A while ago I’ve seen a very clever way of aligning images with text under it, I believe it was on this site but I haven’t been able to find it back.
    Could someone point me to the right page or maybe explain how to get this desired effect?
    Imgur

    #165922
    Paulie_D
    Member

    That’s a little vagues.

    Could you explain a little more?

    Was it perhaps use of a figure and figcaption?

    #165924
    Atelierbram
    Participant

    Yes, could be many things. Did you watch Chris’ latest screencast, … the codepen demo of it

    #165936

    It was a fluid / float design that had images grouped with text, it basically starts with the float: left; part for them but they managed to align them with the bottom of the images and the top of the text (example with baseline: Imgur)
    i’m not sure anymore if they used a vertical align or made them behave like table elements but i thought it was a vertical align.

    #165940
    Paulie_D
    Member

    Hmm…don’t recall ever seeing an alignment like that….the alignment is easy enough but I’m assuming non-fixed heights for the text….that could be awkward.

    #165941
    Paulie_D
    Member

    Actually..it was easier than I thought but the positioning of the text makes the design non-responsive without further adaptations.

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

    I’m wondering about display: table-cell;….

    #165942
    Atelierbram
    Participant

    Was thinking about maybe an updated flexbox article, maybe not this one mmm, this one, which uses text, seems more likely,

    #165945
    Paulie_D
    Member

    Flexbox seems like it should solve this but it’s the alignment of the elements that would be a tricky bit.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.