Question

所以我在Photoshop为我的网站制作了一组导航按钮，我想集中按钮，但是使用各种CSS边距语句或浮动语句只是集中按钮但是它们在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。

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

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/

让多个div与中心对齐在同一排？

1 个答案: