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/

如果我所做的更改不明确，请随时向我提问。

Answer 2

这是浮动/显示问题。修复很简单。将li更改为display：block float：left，这使菜单按照您期望的方式工作。然后到一个添加显示：block和text-align：center。更新在此处 - http://jsfiddle.net/puJcT/

我只在Mac上使用Chrome进行测试，但这适用于所有现代浏览器。

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

2 个答案: