Question

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

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

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

Answer 1

如您在问题中提到的那样不使用position，并且保留相同的HTML，您可以将图片右侧放置到文本中：

请参阅下面的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

谢谢，当我想要图片上方的文字时，实例怎么样？

在与OP讨论后，毕竟可以使用position。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试使用CSS显示块。

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

a img {

}

要正确使用浮动，您需要一个设定宽度的容器（DIV）。我相信这是你正在寻找的（jsfidd链接）。

Answer 3

尝试设置a as block和relative：

a { display: block; position: relative }

Answer 4

这应该有效：

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

小提琴：http://jsfiddle.net/Monteduro/nt44h5r5/14/

将图像定位在链接中

4 个答案: