html - 居中对齐 navbav 列表项中图像下方的文本

Question

我正在尝试构建一个包含四张图片的 navbav，每张图片下方都有一个文本链接。每个图像链接对都在它自己的列表项中。

但是，目前匹配的文本位于每张图片的右侧。我想在每张图片下方居中对齐文本(可能左对齐；取决于什么看起来最好)，但到目前为止我什至无法将文本放到下一行。我尝试了多种 float 组合，所有图片都向左浮动(所有文本链接的左侧)，反之亦然。

我确信有一个简单的方法可以做到这一点，我只是无法弄清楚它。

这是我用于导航栏的 CSS:

#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%;
}

我在这里添加了 HTML:http://jsfiddle.net/AhZzX/2/ 我没有看到添加图像的方法，我会尝试弄清楚如何添加它们。

关于如何解决这个问题有什么想法吗？感谢您的帮助!

Answer 1

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

如果我所做的更改不清楚，请随时问我。