html - 让多个 div 与中心对齐并在同一行？

Question

所以我在 Photoshop 中为我的网站制作了一组导航按钮，我想集中这些按钮，但是使用各种 CSS margin 语句或 float 语句只是集中了按钮，但它们位于 1 x 4 列而不是同一行(有 4 个按钮)。

我网站上的横幅是集中的，我希望按钮集中在它们下面。这是我的代码:

HTML

<div id="home" class="home">
<img title="Home" src="images/images/home.jpg">
</div>

<div id="iwb" class="iwb" align="center;">
<img title="IWB" src="images/images/iwb.jpg">
</div>

<div id="presentations" class="presentations">
<img title="Presentations" src="images/images/presentations.jpg">
</div>

<div id="internet" class="internet">
<img title="internet" src="images/images/net.jpg">
</div>

CSS

.home {
display: block;
width: 188px;
height: 50px;
background: url(images/images/home.jpg) bottom;
text-indent: -99999px;
  }

.home:hover {
background-position: 0 0;
}

.iwb {
display: block;
width: 188px;
height: 50px;
background: url(images/images/iwb.jpg) bottom;
text-indent: -99999px;
}

.iwb:hover {
background-position: 0 0;
}

.presentations {
display: block;
width: 188px;
height: 50px;
background: url(images/images/presentations.jpg) bottom;
text-indent: -99999px;
}
.presentations:hover {
background-position: 0 0;
}

.internet {
display: block;
width: 188px;
height: 50px;
background: url(images/images/net.jpg) bottom;
text-indent: -99999px;

}
.internet:hover {
background-position: 0 0;

}

我怎样才能让它们集中在标题正下方的一行中？如果可能的话，我希望我的标题和导航栏按钮之间没有垂直空白。

谢谢。

Answer 1

如果你想让它们出现在同一行，你应该使用 display: inline-block 或 float: left 而不是 display : block .

您可以在此处查看内联 block 的示例。

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

编辑:

当你使用display:inline-block时，你需要像下面这样使用font-size:0。

http://jsfiddle.net/xXVCg/1/

如果你不想font-size:0，你应该像下面那样使用float:left。

http://jsfiddle.net/xXVCg/