Centrage de div en nombre variables

[pierre42]

Voila je vous explique mon problème :

Je fais un formulaire. Donc je me suis construit une petite boite a la structure assez simple :

<div class="box">
<div class="line">
<label for="truc" class="line">Champ :</label>
<input type="text" id="truc" class="line" name="valeur" value="" size="10">
</div>
(...autres lignes éventuelles...)
</div>

La classe box ressemble à ceci :

div.box {
margin: auto;
width: 30%;
}

et tout ca marche tres bien, ma belle boite de recherche est bien centrée.

Mais maintenant j'en mettrais bien une 2e à coté...

Donc je me dis pas de probleme un petit "display: inline;" et le tour est joué... mais pas du tout, ca ne marche pas, le 2e est affiché en dessous :-/ J'aimerais bien savoir pourquoi d'ailleurs...

Si je met un "float: left;" (ou right d'ailleurs) ils sont alors bien alignés mais plus du tout centrés.

Quelqu'un aurait-il une astuce pour réussir à avoir les 2 en même temps ?

Merci d'avance.

[pierre42]

Bien sur je peux les mettre dans un div qui serait en margin:auto et sur lequel je mettrai la width, mais a ce moment la ca obligerait à utiliser une classe differente en fonction du nombre d'éléments contenus (pour la width) et donc cette structure ne serait plus générique, ce qui m'ennuie beaucoup...