Question

我正在尝试将图片放在文字内容之上。 I.E如下所示

https://i.stack.imgur.com/5L4FG.png

.button-link {
  background: #DBBC26;
  border-radius: 4px;
  color: #ffffff;
  display: block;
  font-size: 14px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 190px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0;
  letter-spacing: .2px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a class="button-link" href="#">Download</a>

Answer 1

试试这个

＆＃13;

 .button-link img{
 height: 20px;
 display: block;
 margin: auto;
}
 .button-link {
 background: #DBBC26;
 border-radius: 4px;
 color: #ffffff;
 display: block;
 font-size: 14px;
 height: 60px;
 text-align: center;
 width: 190px;
 font-weight: 600;
 text-transform: uppercase;
 padding: 0;
 letter-spacing: .2px;}

＆＃13;

 <a class="button-link" href="#">
 <img src="https://i.stack.imgur.com/5L4FG.png"/>Download</a>

＆＃13;

Answer 2

所以你有一个链接和一个图像，你想要将图像堆叠在链接文本的顶部。

您已经定义了自己的链接<a class="button-link" href="#">Download</a>和图片<img src="#" alt="my image" />接下来需要做的就是合并它们

<a class="button-link" href="#">
    <img src="#" alt="my image" />
    Download
</a>

如果你在div中包含链接内容

会更好

这是一个例子：https://jsfiddle.net/fatgamer85/gzmzo4un/

Bootstrap放置超链接上方的图像

2 个答案: