Grow your CSS skills. Land your dream job.

Align Image to Top of Paragraph

  • # April 24, 2013 at 11:12 am

    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?

    # April 24, 2013 at 11:31 am

    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

    # April 24, 2013 at 11:33 am

    Paulie, thanks for the help. How would you suggest it is structured?

    # April 24, 2013 at 11:36 am

    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 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".