Question

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

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

我所需要的只是将图像向上或向下移动几个像素以使文本看起来更好。

我尝试了margin-top:3px，padding-top:3px，display:absolute，display:relative以及其他一些CSS样式，但没有任何效果。

更新：我不需要垂直对齐到中间。是的，它看起来更好，但我仍然希望能够手动将图像移动几个像素。所以我的问题仍然存在：如何在任何方向上将图像中的图像垂直位置微调几个像素。

enter image description here

Answer 1

您可以设置img position: relative，然后用top或bottom移动它 http://jsfiddle.net/kencoder97/xu4158fL/

Answer 2

注意：margin-top not marginTop ..same用于填充等。了解有关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>

Answer 3

span img {
    vertical-align:middle;
}