CSS float：可以使用居中解決方法嗎？

我有一個tagcloud在標籤（在Divs中）應該浮動居中。沒有float：center，所以我正在尋找一個乾淨的解決方案。我的HTML看起來是這樣的：CSS float：可以使用居中解決方法嗎？

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

Div應該浮在空間兩側（居中）。我不確定如何更好地解釋這一點。有任何想法嗎？

謝謝！

更新 .tag divs必須有一個靈活的寬度，以便不同的內容適合它們。

此外，它應該能夠有幾個標籤在同一行（如果他們足夠短）

我的CSS迄今：

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

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

來源

2009-06-22 Ole Spaarmann

如果您將#tagcloud和.tag樣式設置爲相同的寬度，則可以對齊文本中心。

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

另一種選擇是如下：

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

.tag { 
    display:inline; 
}

來源

2009-06-22 14:07:18 Josh

也許這可能有幫助嗎？

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

來源

2009-06-22 14:06:15 Charlie

請告訴我爲什麼這應該得到一個downvote ？這是一個可以接受的方式來集中一個div。 – Charlie 2009-06-22 14:09:05

你將需要給標籤類寬度使用邊際汽車 – Josh 2009-06-22 14:10:42

試試這個

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

#tagcloud{ 
text-align:center; 
}

來源

2009-06-22 14:11:46 AlexC

它在我的電腦上工作

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

來源

2009-06-22 14:29:31 AlexC

CSS float：可以使用居中解決方法嗎？

回答

相關問題