CSS float: centered workaround possible? - css

Question

I have a tagcloud in wich the tags (in Divs) should float centered. There is no float: center so I'm looking for a clean solution. My HTML looks something like this:
<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>
The Divs should float with space to both sides (centered). I'm not sure how to explain this any better. Any ideas?
thanks!
update
The .tag divs must have a flexible width so that varying content fits into them.
Also it should be possible to have several tags in one line (if they are short enough)
My CSS so far:
.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; }
My HTML:
<div id='tagcloud'>
<div class='tag' id='tag_1004'>
<img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />
<span class='name'>design</span>
</div>
<div class='tag' id='tag_1005'>
<img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />
<span class='name'>degeneration</span>
</div>
<div class='tag' id='tag_1006'>
<img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />
<span class='name'>deggendorf</span>
</div>
<div class='tag' id='tag_1007'>
<img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />
<span class='name'>hamburg</span>
</div>

Answer 1

Perhaps this might help?
.tag
{
margin-left:auto;
margin-right:auto;
width:100px;
}

Answer 2

if you set the #tagcloud and .tag styles to the same width you could then just align the text center.
#tagcloud, .tag {
width:100px;
text-align:center;
}
another option would be as follows:
#tagcloud {
width:100px;
text-align:center;
}
.tag {
display:inline;
}

Answer 3

Try this
.tag
{
text-align:center;
display:inline;
}
#tagcloud{
text-align:center;
}

Answer 4

It work on My computer
<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>