CSS浮动：可能的居中解决方法？答案

【问题标题】：CSS float: centered workaround possible?CSS浮动：可能的居中解决方法？
【发布时间】：2010-11-04 20:55:33
【问题描述】：

我有一个标签云，标签（在 Divs 中）应该居中浮动。没有 float: center 所以我正在寻找一个干净的解决方案。我的 HTML 看起来像这样：

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

Divs 应该在两侧（居中）有空间浮动。我不确定如何更好地解释这一点。有什么想法吗？

谢谢！

更新 .tag div 必须具有灵活的宽度，以便不同的内容适合它们。

还应该可以在一行中有多个标签（如果它们足够短的话）

到目前为止我的 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>

【问题讨论】：

标签： css css-float center

【解决方案1】：

也许这会有所帮助？

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

【讨论】：

请告诉我为什么这应该被否决？将 div 居中是一种可接受的方式。
您需要为标签类指定宽度才能使用自动边距
感谢您的回复（我没有给您投反对票），但此解决方案不起作用（我尝试的第一件事）。还有 #tagcloud { text-align: center; } 不起作用。
我不能给标签类一个宽度，因为我不知道它有多宽（取决于内容）。

【解决方案2】：

如果您将 #tagcloud 和 .tag 样式设置为相同的宽度，那么您只需对齐文本中心即可。

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

另一种选择如下：

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

.tag {
  display:inline;
}

【讨论】：

不起作用，因为 .tag 的宽度必须灵活（取决于内容），而且如果空间足够，一行中应该出现多个标签
唯一的选择是在 tagcloud 上对齐文本中心，但你必须 display:inline 标签。

【解决方案3】：

试试这个

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

#tagcloud{
text-align:center;
}

【讨论】：

【解决方案4】：

它可以在我的电脑上运行

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

【讨论】：