I have created a series of navigational buttons for my website using Photoshop, but I'm facing an issue with centralizing them. When applying various CSS margin or float statements to centralize the buttons, they end up arranged in a 1 x 4 column instead of all on the same row (I have 4 buttons).
The banner on my site is centrally positioned, and I want the buttons to be aligned directly below it. Below is the code I am currently working with:
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;
}
How can I center them all in one row directly beneath my header? I want there to be no vertical white space between my header and navigation buttons if possible.
Thank you.