Flotador CSS: posible solución centrada?

Question

Tengo un tagcloud en el que las etiquetas (en Divs) deben flotar centradas. No hay flotante: centro, así que estoy buscando una solución limpia. Mi HTML se parece a esto:

<div id="tagcloud">
  <div class="tag">Tag 1</div>
  <div class="tag">Tag 2</div>
  <div class="tag">Tag 3</div>
  <div class="tag">Tag 4</div>
</div>

Los Divs deberían flotar con espacio a ambos lados (centrado). No estoy seguro de cómo explicar esto mejor. ¿Alguna idea?

¡gracias!

actualización Los div .tag deben tener un ancho flexible para que el contenido variado entre en ellos.

También debería ser posible tener varias etiquetas en una línea (si son lo suficientemente cortas)

Mi CSS hasta ahora:

.tag {
  padding: 5px 0 0 0;
  float: left;
  margin: auto; }
  .tag img {
    border-right: 1px solid #fff;
    margin: 0;
    float: left;
    vertical-align: top; }
  .tag a {
    font: bold 10px Verdana;
    margin: 0;
    background-color: #ccc;
    padding: 3px 4px 3px 4px;
    height: 16px;
    float: left;
    text-decoration: none;
    vertical-align: top;
    cursor: pointer;
    color: #000; }

#tagcloud {
  margin-top: 7px;
  text-align: center; }
  #tag_box #tagcloud .tag {
    margin-left: auto;
    margin-right: auto; }

Mi HTML:

            <div id='tagcloud'>
              <div class='tag' id='tag_1004'>
                <img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />
                <span class='name'><a href="/tags/design">design</a></span>
              </div>
              <div class='tag' id='tag_1005'>
                <img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />

                <span class='name'><a href="/tags/degeneration">degeneration</a></span>
              </div>
              <div class='tag' id='tag_1006'>
                <img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />
                <span class='name'><a href="/tags/deggendorf">deggendorf</a></span>
              </div>
              <div class='tag' id='tag_1007'>
                <img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />

                <span class='name'><a href="/tags/hamburg">hamburg</a></span>
</div>

Answer 1

si configura los estilos #tagcloud y .tag con el mismo ancho, podría alinear el centro de texto.

#tagcloud, .tag {
  width:100px;
  text-align:center;
}

otra opción sería la siguiente:

#tagcloud {
  width:100px;
  text-align:center;
}

.tag {
  display:inline;
}

Answer 2

¿Quizás esto podría ayudar?

.tag
{
margin-left:auto;
margin-right:auto;
width:100px;
}

Answer 3

Prueba esto

.tag
{
text-align:center;
display:inline;
}

#tagcloud{
text-align:center;
}

Answer 4

Funciona en mi computadora

   <style>
.tag {
  padding: 5px 0 0 0;
  display:inline;
  margin: auto; }



  .tag img {
  }


  .tag a {
    font: bold 10px Verdana;
    margin: 0;
    background-color: #ccc;
    padding: 3px 4px 3px 4px;
    height: 16px;

    text-decoration: none;
    vertical-align: top;
    cursor: pointer;
    color: #000; }



#tagcloud {
  margin-top: 7px;
  text-align: center; }



</style>