отображение текста и изображения в одной строке

Question

У меня проблема с CSS-стилями. Я хочу отобразить файл и удалить изображение в той же строке.

1-го изображения

В этом изображении значок дисплея небольшое выше от doc.If я включаю код CSS кажется связывают это.

Я хочу отображать изображение 20% от margin-right. Для тестирования я изменился на 66%.

В 2 imgae это снимок экрана без использования стиля CSS. Я приложил мой CSS и HTML код

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

Насколько я понимаю, проблема возникает из-за того, что ваш CSS применяется к <img> тегу, который заключен в <a> тега. Поведение изменяется с помощью любого CSS, применяемого к <a>. Вы должны изменить свой CSS, чтобы он применим к <a><img>. Простым способом было бы дать конкретный класс этому тегу <a>.

Answer 2

на первом снимке экрана изображение выравнивается в верхней части строки (поскольку css делает его поплавком), во втором скриншоте он выровнен по центру линии-высоты браузером по умолчанию - это близко к базовой линии в вашем случае, но не точно на линии. Для работы с вашей CSS-кода:

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 */ 
} 

Это поместит изображение на линии в большинстве браузеров, но вы должны позволить другим, чтобы показать изображение немного выше или ниже линии. Это известная проблема при выравнивании изображений с текстом, поскольку не все браузеры отображают исходный текст для текста в том же месте.