CODEWITHSUNDEEP
htmlcsspositioning
Nikolay
Nikolay

Reputation: 165

buttons with pictures - CSS problem

I have a problem positionning a image in a button. Here's a demo http://problem-demo.hit.bg/index.html
I want to position the picture in the middle of the button without pushing the span down. If I set the position to relative the span is being pushed, if I set it to absolute or fixed margin: auto isn't working, if I don't set margin to the span and the image is relative hte spans aren't in one line. Here's the sorce:

<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>

Upvotes: 0

Views: 112

Answers (2)

jeroen
jeroen

Reputation: 91734

The problem is your positioning and the setting of display:block to the image. If you just float both the image and the span to the left, it should display like you want it to.

However, I agree with @fabrik that a background image is the best solution.

Upvotes: 1

fabrik
fabrik

Reputation: 14365

You can modify your code like this:

CSS:

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

HTML:

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

Upvotes: 3

Related Questions