Forums

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

Home Forums CSS Align Image to Top of Paragraph

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #44340
    siouxfan45
    Participant

    I’d like my text to align perfectly with the top of my images, but I believe line-height is impacting this. Here is an example of a left-aligned image: [http://themeforward.com/demo2/2013/04/24/2289/](http://themeforward.com/demo2/2013/04/24/2289/ “”)

    I threw it into CodePen to better illustrate the CSS and markup: [http://codepen.io/anon/pen/Cpovd](http://codepen.io/anon/pen/Cpovd “”)

    Any pointers?

    #133034
    Paulie_D
    Member

    I wouldn’t necessarily structure it that way but whatever your line height is, say 2em then there is 1em of space to be divided between the the area above and below the line.

    Therefore, add half of that as top margin to the image and it should line up…at least close enough.

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

    #133038
    Paulie_D
    Member

    To me a ‘post’ would have a wrapping div which could then contain an image and the text.

    `

    `
    `

    Lorem

    `

    In the Codepen you can see that because the image is floated it pops out of the paragraph (add a border to the p to see it).

    I guess I’m just used to doing it that way….not saying it’s better.

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