在同一行中显示文本和图像

Question

I'm having problem with css styles.I want to display the file and delete image in same line.

1 st image

In this image icon display slight above from doc.If I include css code it appears link this.

I want to display the image 20% from margin-right.For testing I changed to 66%.

In 2nd imgae is a screen shot for without using css style. I attached my css and html code

css code:
img {
  display: inline-block;
  float: right;
  margin-right:66%;   //realy I want  margin-right:20%;
  }

html in php
 echo '<div style="text-align:left;">';
            while($fet=mysql_fetch_assoc($filesql1))
            {

              $file=$fet['file_name'];
               $ef=$fet['cf_id'];
              $next1 = basename($file);
              echo "<h3><a  class=doc href='".$file."' title='".$file."' download><p style='margin-left:1cm;'>".$next1."</a>";
               echo '<a href=#><img src="image/delete1.png"  width="10" height="10" title="Remove" onclick="myFunction('.$fet['cf_id'].');"></a></span>';
            }   
         echo '</div>';   

Answer 1

As far as I can see, the problem comes from the fact that your CSS applies to the <img> tag, which is enclosed in an <a> tag. The behaviour is changed by whatever CSS is applied to <a> . You should modify your CSS so that it applies to <a><img> . The simple way would be to give a specific class to this <a> tag.

Answer 2

in your first screenshot the image aligns to the top of your line-height (because the css makes it a float), in the second screenshot it is aligned to the the center of the line-height by browser-default - this is close to the baseline in your case but not exactly on the line. To work on with your css-code:

img {
display: inline-block;
float: right;
margin-right:20%;
position: relative;
top: 4px; /* maybe 3px or 5px or even 6px will look better; try it out */
}

This will put your image on the line in most browsers but you will have to allow others to show the image slightly above or beneath the line. This is a known problem with aligning images to text because not all browsers render the baseline for the text in the same place.