Question

我在按钮中定位图像时遇到问题。这是一个演示http://problem-demo.hit.bg/index.html
我想将图片放在按钮中间，而不是向下推动跨度。如果我将位置设置为相对跨度被推动，如果我将其设置为绝对或固定边距：auto不起作用，如果我没有设置边距并且图像是相对的，则跨度不在一条线。这是痛苦的：

<style>
ul {
    list-style: none;
}
ul li {
    margin-left:20px;
    display: inline-block;      
}
ul li a {
    float:left;
    height: 80px;
    width: 80px;
    text-align: center;
    text-decoration: none;
    border: 1px solid black;
}
ul li a span {
    color: gray;
    font-size: 18px;
    position: relative;
    top: 54px;
}
ul li a img {
    position: fixed;
    margin: 20px auto;
    display: block;
}

<ul>
    <li><a href="#"><img src="download.png" alt="something" /><span>Download</span></a></li>
    <li><a href="#"><img src="download.png" alt="something" /><span>Download</span></a></li>
</ul>

Answer 1

您可以像这样修改代码：

CSS：

li {
background:url(download.png) 20px 20px no-repeat;
}

HTML：

<li><a href="#">Download</a></li>

Answer 2

问题在于您的定位以及display:block对图像的设置。如果您只是将图像和跨度浮动到左侧，它应该显示为您想要的颜色。

但是，我同意@fabrik认为背景图像是最好的解决方案。

带图片的按钮 - CSS问题

2 个答案: