CSS 如何移动与某些文本内嵌的图像的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6940669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I move the position of an image that's inline with some text?
提问by Marie
I have the following:
我有以下几点：
<li><a class='disabled' ><img src='../../Content/Icons/home.png' />Home</a></li>
My li height is 25px and my img is 16x16. What I would like to do is to make the image line up with the text and also have a small space between the image and text. I tried the following:
我的 li 高度是 25px，我的 img 是 16x16。我想要做的是使图像与文本对齐，并且图像和文本之间也有一个小空间。我尝试了以下方法：
img { padding-top: 6px; margin-right: 4px; }
The image moves down but the text moves down as well.
图像向下移动，但文本也向下移动。
Is there a way I could just add padding or margin to the image without the text moving?
有没有一种方法可以在不移动文本的情况下为图像添加填充或边距？
Please note that I already use set (and change) the background color so I need to use the img tag.
请注意，我已经使用了设置（和更改）背景颜色，所以我需要使用 img 标签。
回答by thirtydot
You can use:
您可以使用：
img {
margin-right: 4px;
position: relative;
top: 6px
}
That will move only the imgdown 6pxfrom where it would have been.
那只会从本来的位置img向下移动6px。
回答by Subdigger
something like this? html:
像这样的东西？html：
<li class="menu"><a class='disabled' >Home</a></li>
css:
css：
li.menu {
background-image: url(../../Content/Icons/home.png) left 6px;
padding-left: 20px;
margin-right: 4px;
}
回答by Nami Nam
You can also give the
你也可以给
a{
float:left;
}
(wiil not take into account the pesky 6px from the image - thirtydot mentioned)
a{
float:left;
}
（不会考虑图像中讨厌的 6px - 提到的三十点）
