HTML Centrer 3 images

Bonjour,

j'ai commencé un site;
j'avais envie de faire un menu horizontal...et pour ca, j'ai mis le fond grace a une image en background et repeat.

Par contre, dans mon html, je centre les images qui sont au nombre de 3 et qui servent à faire les boutons...mais le problème c'est qu'elles se superposent...comment faire pour qu'elles soient centrées sans se superposer ?

CSS
.top_menu{
background-image: url(images/top_menu.jpg);
background-repeat:repeat-x;
height: 40px;
}

img{
display: block;
margin: auto;
position:relative;
}

HTML
<div class="top_menu">
<img alt="bouton" src="images/bouton1.png"/>
<img alt="bouton" src="images/bouton2.png"/>
<img alt="bouton" src="images/bouton3.png"/>
</div>

Mes solutions
j'ai pensé à faire 3 div différents mais ca va faire gros, j'ai aussi pensé à un table mais ca va faire des lignes et j'aime pas...

ps: je sais que j'ai pas encore mis le lien à mes boutons

Avez-vous une solution svp ? Merci