Positionierung eines Containers in einem Container

[Sven K.]

Hallo Leute!

Ich habe das Problem, dass ich Buttons nicht nebeneinander angezeigt bekomme. Sie werden immer untereinander gezeigt und des weiteren will ich das die Buttons mittig von dem anderen Container angezeigt werden.

Hier der CSS-Code:

#navi
{width: 100%;
margin: 0;
background-image: URL("background.gif");}

.buttoncontainer
{width: 100px;
height: 34px;}

.button a
{color: rgb(255,255,255);
background-color: #2175bc;
padding: 2px;
padding-left: 3px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
border-bottom: 1px solid #B2B5B6;
border-top: 1px solid #B2B5B6;
font: 11px Times New Roman;
text-decoration: none;
text-align: center;
margin-top: 1px;
width: 100%;
float: left;}

.button a:hover
{border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
text-decoration: none;
color: rgb(255,255,255);
background-color: #2586d7;
width: 100%;}

Hier der HTML-Code
.
.
.
<div id="navi">
<div class="buttoncontainer">
<div class="button">

<a href="#">Hallo</a>
 <a href="#">Welt!</a>
 <a href="#">Dies</a>
 <a href="#">ist</a>
 <a href="#">ein</a>
 <a href="#">Test!</a>

</div>
</div>
</div>
.
.
.

Ich hoffe mir kann da einer helfen! Danke!

mfG
Sven