1

我正在尝试构建一个具有四个图像的导航栏，每个图像下方都有一个文本链接。每个图像链接对都在它自己的列表项中。

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

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

这是我用于导航栏的 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/ 我没有看到添加图像的方法，我将尝试弄清楚如何添加它们。

关于如何解决此问题的任何想法？谢谢您的帮助！

4

2 回答 2

2

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

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

于 2012-08-20T20:23:29.430 回答
0

这是一个浮动/显示问题。修复很简单。将 li 更改为 display: block float: left，这会使菜单按您期望的方式工作。然后到一个添加显示：块和文本对齐：中心。更新在这里 - http://jsfiddle.net/puJcT/

我仅在 Mac 上的 Chrome 中进行测试，但这应该适用于所有现代浏览器。

于 2012-08-20T20:27:54.250 回答