将图像向上或向下移动几个像素

Question

这似乎是小事一桩，但我找不到任何东西。 我有一个文本和一个小图像（图标）在文本中，如下所示：

<span>ask<img src=ask.svg height=16> fav<img src=fav.svg> voted</span>

我只需要将图像向上或向下移动几个像素，以便与文本更好地配合。

我尝试了CSS样式，如margin-top:3px、padding-top:3px、display:absolute、display:relative等，但都没有效果。

更新：我不需要垂直居中。是的，它看起来更好，但我仍然希望能够手动将图像向任何方向微调几个像素。因此，我的问题仍然是：如何通过几个像素在文本中微调图像的垂直位置。

- exebook

---

你尝试过调整 vertical-align（CSS）吗？ - ddrace

应该可以使用“span img {vertical-align:middle;}”来实现。 - sinisake

即使我使用居中对齐，它仍不完全是我想要的，我仍然想再移动几个像素。 - exebook

使用像素值而不是 middle 属性来设置 vertical-align。例如：vertical-align:-3px。 - Alohci

@Alohci 这个可行！你能把它变成一个答案并提高你的声望吗？ - exebook

Answer 1

您可以为img设置position:relative，然后使用top或bottom移动它。

http://jsfiddle.net/kencoder97/xu4158fL/

一个将图像向上移动几个像素的例子:

<img src="my_image.jpg" style="position: relative; bottom: 2px">

- Cuong Vu

Answer 2

注意：margin-top 不是 marginTop，padding 等同理。了解更多关于 HTML 和 CSS 语法的知识。

<span>ask<img src=ask.svg height="16" style="margin-Top:-6px">fav<img src=fav.svg> voted</span>

最好将图像从 span 标签中移出。

  <span>ask</span><img src=ask.svg height="16" style="margin-Top:-6px"><span>fav</span><img src=fav.svg><span> voted</span>

或者只需使用div来包装

<div>ask<img src=ask.svg height="16" style="margin-Top:-6px">fav<img src=fav.svg> voted</div>

- SergeDirect

---

使用“div”而不是“span”，或在图像前/后关闭和重新打开span。 - SergeDirect

Answer 3

http://jsfiddle.net/v594fvgr/

span img {
    vertical-align:middle;
}

- sinisake

---

这个可以工作，但不是我想要的，我仍然想将图像移动几个像素，完美居中对齐的图像并不完全符合我的要求。 - exebook