SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    can an image sit evenly in a paragraph?



    Hi from very hot & sunny 21 degrees C Wakefiled UK...

    Ive got a situation where i have a graphic sitting in a line of text which looks awkward.

    Ive made a bit of progress before posting. Originally i just added the text and it broke all the text flow up. Then I remebered that I needed to get the image inline so placed the img element insine a span class with a bit of inline css, which of course I'll add to an external style sheet later.

    Any way heres the specific problem. On this page http://www.pauserefreshment.co.uk/la...s5-manual.html there a plus graphic, if you cant find it Ive put it in the screen grab at the top of this post.

    I want to make the graphic sit evenly instead of what I have now which is an ugly line height change in the paragraph. Is the best solution to increase the
    line-height?

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,719
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Hmm, on hte <span> which you set display:inline-block, can you not just set the vertical-align to bottom?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hmm, on hte <span> which you set display:inline-block, can you not just set the vertical-align to bottom?
    Nice one Ryan you fixed it and heres the code I put in to get the image to sit tight within a line of text -

    <span style="vertical-align:bottom; display:inline-block"><img src="images/model_bean/plus_25.jpg" alt="plus key on La Spaziale s5" width="25" height="25" /></span>

    Thinking about it before this fix it was sitting on the baseline of the text by default and vertical-align:bottom gets it lower than the baseline. If my thinking is wrong any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This is kinda old but take a look at this. It's pretty cool and may help you "see" better what's going on with stuff like vertical-align, line-height and font-size.

    http://dbaron.org/css/2000/01/dibm

  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    This is kinda old but take a look at this. It's pretty cool and may help you "see" better what's going on with stuff like vertical-align, line-height and font-size.

    http://dbaron.org/css/2000/01/dibm
    Brilliant Stomme thanks :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,719
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Your thinking was correct David . That was my thinking as well when I posted lol
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Zygoma View Post
    <span style="vertical-align:bottom; display:inline-block"><img src="images/model_bean/plus_25.jpg" alt="plus key on La Spaziale s5" width="25" height="25" /></span>
    Why do you even need the span? Just whack those styles onto the <img> tag and you should get the same result!

  8. #8
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Why do you even need the span? Just whack those styles onto the <img> tag and you should get the same result!
    Thank you everyone again - Ive applied your solutions and now know how to get a graphic to sit tight in a line of text :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •