如何移动与某些文本内联的图像的位置？

Posted 2023-03-06

【中文标题】如何移动与某些文本内联的图像的位置？

【英文标题】：How can I move the position of an image that's inline with some text?

【发布时间】：2011-10-19 22:03:40

【问题描述】：

我有以下几点：

<li><a class='disabled' ><img src='../../Content/Icons/home.png' />Home</a></li>

我的 li 高度是 25px，我的 img 是 16x16。我想做的是使图像与文本对齐，并且图像和文本之间也有一个小空间。我尝试了以下方法：

img  padding-top: 6px; margin-right: 4px; 

图像向下移动，但文本也向下移动。

有没有一种方法可以在不移动文本的情况下为图像添加填充或边距？

请注意，我已经使用了设置（和更改）背景颜色，所以我需要使用 img 标签。

【参考方案1】：

像这样？ html:

<li class="menu"><a class='disabled' >Home</a></li>

css:

li.menu  
  background-image: url(../../Content/Icons/home.png) left 6px;
  padding-left: 20px;
  margin-right: 4px;
 

【讨论】：

我已经使用背景图片来设置颜色了。我希望我可以使用它，但我不能。这就是我选择使用 img 的原因。很抱歉没有把这个放在帖子里。我现在更新了我的问题。

@Marie，同时使用颜色和图像有什么问题？

哦，我虽然是其中之一？

【参考方案2】：

你可以使用：

img 
    margin-right: 4px;
    position: relative;
    top: 6px

这只会将img 向下移动6px。

【参考方案3】：

你也可以给

或

a
  float:left;

（不会考虑图片中讨厌的 6px - 提到了 30 点）