HTML & CSS
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-spaziale-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
Any insights welcome
Why do you even need the span? Just whack those styles onto the <img> tag and you should get the same result!
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.
Your thinking was correct David :). That was my thinking as well when I posted lol
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
Hmm, on hte <span> which you set display:inline-block, can you not just set the vertical-align to bottom?
Thank you everyone again - Ive applied your solutions and now know how to get a graphic to sit tight in a line of text
Brilliant Stomme thanks