Question

我试图定位一个glyphicon，使其位于img元素的中心顶部。我尝试过定位，样式，填充，边距，z索引等，但是字形总是想要留在图像之外并且拒绝重叠。

是否可以将字形放在img元素的顶部？

这是我目前的html：

<div class="prettycircle">
    <img class="img-circle" src="mp3circlew.png" style="width: 160px; height: 140px;"/>
    <span class="glyphicon glyphicon-usd"></span>
  </div>

我现在的css，虽然不是我尝试过的所有内容：

.prettycircle {
  width: 160px;
}

.prettycircle .glyphicon-usd {
position:relative;
top:2px;
right:-5px;
}

Answer 1

请尝试以下代码：

HTML CODE：

<div class="prettycircle">
    <img class="img-circle" src="mp3circlew.png" style="width: 160px; height: 140px;"/>
    <span class="glyphicon glyphicon-usd">dvfdvg</span>
  </div

CSS代码：

.prettycircle{
   position: relative;
   width: 160px;
}
.prettycircle .glyphicon-usd {
 left: 0;
    position: absolute;
    top: 2px;
}

参见 jsfiidle Demo

Answer 2

我刚看了你的问题，我不太确定这可以解决问题，但我想尝试帮助你，你看我们可以把图像作为背景属性，比如

background:url('img/img.jpg');

之后，我们可以将<span>标记与位置一起应用。如果确实有帮助请。我会很开心。 - Prio

使用bootstrap v3.3.2，我可以在img元素的顶部放置一个glyphicon吗？

2 个答案: