CODEWITHSUNDEEP
htmlcss
ben_dchost
ben_dchost

Reputation: 915

How do I get image to display above each <li>

I'm trying to get the image to display above each list item, which needs to be displayed inline. I've tried increasing the padding for the image on .ccs but it doesn't look right. Any advice would be great.

Code: http://jsfiddle.net/kcNa9/

Here is HTML: 

<div id="frontpageproducts">
<ul>
    <li><a href="<%= url_prefix %>dac?no-upsell=1"><img src="img/front-page/application.png">Order Domains</a></li>        
    <li><a href="<%= url_prefix %>package-chooser?no-upsell=1"><img src="img/front-page/application.png">Order Web Hosting</a></li>      
    <li><a href="<%= url_prefix %>dedicated-servers?no-upsell=1"><img src="img/front-page/application.png">Order Servers</a></li>       
    <li><a href="<%= url_prefix %>vps?no-upsell=1"><img src="img/front-page/application.png">Order VPS</a></li>      
    <li><a href="<%= url_prefix %>add-ons?no-upsell=1"><img src="img/front-page/application.png">Order Add-ons</a></li>

</ul>
</div>

And CSS:

#frontpageproducts li{
font-weight: 500;
font-style: normal;
display: inline;
font-size: 15px;
list-style: none;   

}

#frontpageproducts img{
display:inline-block;
padding-left: 30px; 
padding-bottom: 5px;
}

Upvotes: 3

Views: 579

Answers (4)

Abhishek Verma
Abhishek Verma

Reputation: 489

Set the parent div width to 100% and set the width of ul to 95%. Then set the width of li to 45%, so that only two would come in a row.

Refer to the fiddle link below

http://jsfiddle.net/abhishekverma3189/N6G83/

Upvotes: 1

Adween
Adween

Reputation: 2820

Add br tags after the images and make the li's inline blocks

http://jsfiddle.net/kcNa9/4/

Images centered

http://jsfiddle.net/kcNa9/9/

EDIT

As many people are stating (i did note it in the comments) giving the image display:block does bump it on its own line. this means you do not need the br tags.

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105863

you should display:inline-block your li and then , you can set img as block : http://jsfiddle.net/kcNa9/15/ 

#frontpageproducts li{
    font-weight: 500;
    font-style: normal;
    display: inline-block;
    font-size: 15px;
    list-style: none;   

    }
#frontpageproducts img{
    display:block;
    margin:auto;
    }

Upvotes: 1

noob
noob

Reputation: 641

There are many methods to achieve this. What I did here http://jsfiddle.net/kcNa9/14/ is giving display:block for img and minor edits in your CSS.

Upvotes: 2

Related Questions