Question

I have this item in a horizontal navigation menu:

<li class="menu">
   <a href="---">Our Users</a>
</li>

I want it to appear like this:

I will figure out the text color, etc. What I want to know is, how to have the image appear above the text, and the text centered below it.

Any advice?

Answer 1

Try this.
Assuming your image is not clickable…
apply width and padding to you li tag.

li { background: url(urimage.png) no-repeat; 
 padding: 72px 0 0 0; 
 text-align: center;
 width: 100px;
 list-style: none;

}

If you want your image to be clickable just wrap your text “our users” into a div and apply same style as above.

Try this jsfiddle demo

hope it’ll help you. thank you