Float CSS: soluzione alternativa centrata possibile?
Domanda
Ho un tagcloud in cui i tag (in Divs) dovrebbero fluttuare centrati. Non c'è galleggiante: centro quindi sto cercando una soluzione pulita. Il mio HTML è simile al seguente:
<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>
I Div dovrebbero galleggiare con spazio su entrambi i lati (centrati). Non sono sicuro di come spiegarlo meglio. Qualche idea?
grazie!
Aggiorna I div .tag devono avere una larghezza flessibile in modo che i vari contenuti si adattino a loro.
Inoltre dovrebbe essere possibile avere più tag in una riga (se sono abbastanza corti)
Il mio CSS finora:
.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; }
Il mio 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>
Soluzione
se imposti gli stili #tagcloud e .tag sulla stessa larghezza, puoi semplicemente allineare il centro di testo.
#tagcloud, .tag {
width:100px;
text-align:center;
}
un'altra opzione sarebbe la seguente:
#tagcloud {
width:100px;
text-align:center;
}
.tag {
display:inline;
}
Altri suggerimenti
Forse questo potrebbe aiutare?
.tag
{
margin-left:auto;
margin-right:auto;
width:100px;
}
Prova questo
.tag
{
text-align:center;
display:inline;
}
#tagcloud{
text-align:center;
}
Funziona sul mio 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>