1

タグ (Div 内) を中央に配置するタグクラウドがあります。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>

Div は、両側 (中央) にスペースを空けてフロートする必要があります。これをこれ以上うまく説明する方法がわかりません。何か案は？

ありがとう！

更新 .tag div には、さまざまなコンテンツが収まるように柔軟な幅が必要です。

また、1行に複数のタグを含めることができるはずです（タグが十分に短い場合）

これまでの私の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>
4

4 に答える 4

2

おそらくこれが役立つでしょうか？

.tag
{
margin-left:auto;
margin-right:auto;
width:100px;
}
于 2009-06-22T14:06:15.693 に答える
1

#tagcloud と .tag スタイルを同じ幅に設定すると、テキストを中央に揃えることができます。

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

別のオプションは次のようになります。

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

.tag {
  display:inline;
}
于 2009-06-22T14:07:18.560 に答える
1

これを試して

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

#tagcloud{
text-align:center;
}
于 2009-06-22T14:11:46.663 に答える
1

それはマイコンピュータで動作します

   <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-22T14:29:31.137 に答える