[Resolvido] Problema com alinhamento.

Bom, tenho o seguinte conteúdo:

<div id="haha"><img src="img/userphoto/Hada_middle.gif" width="60" height="60" class="img_avatar" alt="" />
<div id="nome_avatar_principal"><a href="#">Hada</a></div>
</div>
<div id="haha"><img src="img/userphoto/Hada_middle.gif" width="60" height="60" class="img_avatar" alt="" />
<div id="nome_avatar_principal"><a href="#">Hada</a></div>
</div>

Logo segue os estilos CSS:

.img_avatar {
 background-color: #FFFFFF;
 padding: 1px;
 border: 1px solid #c0c1c1;
 margin: 0px;
}
#nome_avatar_principal {
 font-weight: bold;
 font-size: 10px;
 text-align: center;
 line-height: 10px;
}

#nome_avatar_principal a {

 color: #485c00;
 text-decoration: none;
}

#nome_avatar_principal a:hover {

 color: #526900;
}

Qual meu objetivo? Deixar todo o conteúdo das divs #haha numa mesma linha, e centralizados, com espaço de 2px entre cada um.

****

Problemas*: Não consegui meu objetivo utilizando float:left; nem display:block;.

Será que alguém poderia ajudar ?

Abrass.