CSS float: centrado solução possível?

Question

Eu tenho um tagcloud em wich as tags (em Divs) deve flutuar centrado. Não há float: center assim que eu estou procurando uma solução limpa. Minha aparência HTML algo como isto:

<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>

Os Divs deve flutuar com espaço para ambos os lados (centrado). Eu não sei como explicar isso melhor. Alguma idéia?

Obrigado!

update Os divs .tag deve ter uma largura flexível, de modo que variando ajustes de conteúdo para eles.

Além disso, deve ser possível ter várias marcas em uma linha (se eles são curtos o suficiente)

O meu CSS até agora:

.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; }

O meu 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

Se você definir os estilos #tagcloud e .tag para a mesma largura que você poderia, então, apenas alinhar o centro do texto.

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

outra opção seria a seguinte:

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

.tag {
  display:inline;
}

Answer 2

Talvez isso pode ajudar?

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

Answer 3

Tente este

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

#tagcloud{
text-align:center;
}

Answer 4

Ele funciona no meu computador

   <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>