所以我为我的网站制作了一组导航按钮,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;
}
我怎样才能让它们集中在我的标题下方的一行中?如果可能,我希望标题和导航栏按钮之间没有垂直空白。
谢谢。