[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 212
  • Last Modified:

Simple CSS positioning issue

I am at a loss on how to do this.  It seems so simple.  I have three lines of text.  The middle line also contains an image that is a bit higher than the line height.  I do not want the image to increase the line height.  I want it to creep into the space of the line below it.  

Here is my sample mock up.
http://realpersona.com/test/line.html

Please give suggestions.
0
Thread7
Asked:
Thread7
  • 2
1 Solution
 
LZ1Commented:
Try this:
<img src="btn_edit.jpg" align="top">
0
 
Thread7Author Commented:
Well good idea, but that just made the line gap at the bottom instead of the top of line #2.
http://realpersona.com/test/line_top.html
0
 
LZ1Commented:
I'm not sure what you mean by

>> I do not want the image to increase the line height.  I want it to creep into the space of the line below it.  

Unless you position it absolutely, the entire line will have to make room for the image vertically.
0
 
jrm213jrm213Commented:
For that specific example the best I can come up with without really messing with your layout is

 
<img align="top" src="btn_edit.jpg" style="vertical-align: bottom; margin-bottom: -6px;">

Open in new window

0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now