CSS с плавающей запятой:возможно ли центрированное обходное решение?
Вопрос
У меня есть облако тегов, в котором теги (в Divs) должны располагаться по центру.Поплавка нет: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 должны иметь гибкую ширину, чтобы в них помещалось различное содержимое.
Также должна быть возможность иметь несколько тегов в одной строке (если они достаточно короткие).
Мой 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>
Решение
если вы установите для стилей #tagcloud и .tag одинаковую ширину, вы сможете просто выровнять текст по центру.
#tagcloud, .tag {
width:100px;
text-align:center;
}
другой вариант будет следующим:
#tagcloud {
width:100px;
text-align:center;
}
.tag {
display:inline;
}
Другие советы
Возможно, это может помочь?
.tag
{
margin-left:auto;
margin-right:auto;
width:100px;
}
Попробуй это
.tag
{
text-align:center;
display:inline;
}
#tagcloud{
text-align:center;
}
Это работает на моем компьютере
<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>