Question

I’m attempting to build a navbav that has four images, with a text link below each of them. Each image-link pair is in it’s own list item.

However, currently the matching text is to the right of each image. I’d like to center align the text (maybe left align; depends on what looks best) underneath each picture, but as of yet I can’t even get the text onto the next line. I’ve tried a number of combinations of float and either all the picture float left (to the left of all text links) or vice versa.

I’m sure there’s an easy way to do this, I’m just having trouble figuring it out.

Here’s the CSS I’m using for the navbar:

#navbar {
width: 100%;
float: left;
background-color: #FFFFCC;
box-shadow: 5px 5px 30px #888888;
margin-bottom: 5%;
}

#navbar ul {
list-style-type: none;
margin:0;
padding:0;
} 

#navbar li {
display:inline;
padding:2.5%;
}

#navbar a {}

#navpiclist img {
height: 100px;
width: 10%;
}

I added the HTML here: http://jsfiddle.net/AhZzX/2/
I didn’t see a way to add the images, I’ll try to figure out how and add them.

Any thoughts on how to fix this issue? Thanks for the help!

Answer 1

http://jsfiddle.net/AhZzX/17/

Feel free to ask me any questions if the changes I made are unclear.