将图像定位在链接中

I’ve got some markup that doesn’t have much flexibility. It contains a simple link with an image inside of it. I’m trying to use CSS to get the image to display below the text. However, the only way I can do this is with absolute positioning. I thought there was another way to do this without having to resort to that. Any ideas? Also, I’m trying to get the image to display to the right of the text. I can do this by floating the image to the right, but the image appears all the way to the right of the container. Does anyone know how I can get the image to appear right next to the text? I don't really have the flexibility of adding a span tag around the link text.

我有一些没有太大灵活性的标记。它包含一个带有图像的简单链接。我正在尝试使用CSS来使图像显示在文本下方。但是,我能做到这一点的唯一方法就是绝对定位。我认为还有另一种方法可以做到这一点,而不必诉诸于此。有任何想法吗?此外,我正在尝试让图像显示在文本的右侧。我可以通过将图像向右浮动来完成此操作,但图像一直显示在容器的右侧。有谁知道我怎么能让图像出现在文本旁边?我没有在链接文本周围添加span标记的灵活性。

a img{ position: absolute; top:30px }

<a href="#">
  <img src="http://placehold.it/350x150”> 
  Enter Header
</a>

4 个解决方案

#1

Not using position as you mentioned in your question, and keeping the same HTML you can put image right sided to text:

不使用您在问题中提到的位置,并保持相同的HTML,您可以将图像右侧放置到文本:

see the snippet below:

请参阅下面的代码段:

a {
  display: inline-block;
  width: auto;
}
a img {
  float: right;
  margin-left: 10px;
}

<a href="#">
  <img src="http://placehold.it/150x100" />Enter Header
</a>

UPDATE Based on OP question in comment here is how to put text above image.

更新根据评论中的OP问题,这里是如何将文字放在图像上方。

Thanks, what about the instance when I want the text above the image?

谢谢,当我想要图像上方的文字时,实例怎么样?

and after a discussion with OP, it was possible to use position after all.

在与OP讨论之后,毕竟可以使用位置。

a {
  position: relative;
}
a img {
  position: absolute;
  top: 25px
}

<a href="#">
  <img src="http://placehold.it/150x100" />Enter Header
</a>

#2

Try setting the a as block, and relative:

尝试将a设置为块和相对:

a { display: block; position: relative }

#3

this should work:

这应该工作:

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

fiddle: http://jsfiddle.net/Monteduro/nt44h5r5/14/

#4

Try using CSS display block.

尝试使用CSS显示块。

http://jsfiddle.net/nt44h5r5/15/

a img {

}

To use float properly, you need to have a container (DIV) at a set width. I believe this is what you're looking for (jsfidd link).

要正确使用浮动,您需要具有设定宽度的容器(DIV)。我相信这就是你要找的东西(jsfidd链接)。

#1