Html 在链接中定位图像

我有一些没有太多灵活性的标记。它包含一个带有图像的简单链接。我正在尝试使用CSS使图像显示在文本下方。然而，我能做到这一点的唯一方法是绝对定位。我认为有另一种方法可以做到这一点，而不必求助于此。有什么想法吗？此外，我还试图让图像显示在文本的右侧。我可以通过将图像向右浮动来实现这一点，但图像始终显示在容器的右侧。有人知道如何让图像显示在文本旁边吗？我真的没有在链接文本周围添加span标记的灵活性

a img{位置：绝对；顶部：30px}

---

不使用您在问题中提到的

位置

，并保留相同的HTML，您可以将图像右侧放置到文本：

请参见下面的代码段：

a{
显示：内联块；
宽度：自动；
}
img{
浮动：对；
左边距：10px；
}

---

尝试使用CSS显示块

---

要正确使用float，您需要有一个设置宽度的容器（DIV）。我相信这就是您要查找的内容（jsfidd链接）。

尝试将a设置为块，然后选择相对：

a { display: block; position: relative }

这应该起作用：

a img {
    display:inline-block;
    vertical-align:middle;
    float:right;
}
a {
    display:inline-block;
    line-height:150px; (or any height of the image)
}

---

fiddle:

谢谢你的回复，但是我没有灵活性来移动html或在文本周围添加span标记，所以这真的不起作用。好吧，我误解了你的问题，让我重新回答谢谢，当我想要图片上方的文本时，这个例子怎么样？根据你上一段代码，图片上方的文本似乎对我不起作用。让我们来看看。另外..top:30px对CSS没有任何意义。如果您想要一个边距顶部，请使用边距顶部：30px；在代码中使用它并查看。这并不能回答OP的问题。更新以解决OP的问题。谢谢，当我需要图片上方的文本时，该实例如何？如果您无法向链接的文本添加任何span或div，则没有简单的解决方案。您可以使用position absolute，也可以使用js简单代码来分析每个a并用文本反转img。就这样,

a img {
    display:inline-block;
    vertical-align:middle;
    float:right;
}
a {
    display:inline-block;
    line-height:150px; (or any height of the image)
}