Databases
StackOverflow2013
Postsdbo
POCSS float: centered workaround possible?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS float: centered workaround possible?
    text
    copied!<p>I have a tagcloud in wich the tags (in Divs) should float centered. There is no float: center so I'm looking for a clean solution. My HTML looks something like this:</p> <pre><code>&lt;div id="tagcloud"&gt; &lt;div class="tag"&gt;Tag 1&lt;/div&gt; &lt;div class="tag"&gt;Tag 2&lt;/div&gt; &lt;div class="tag"&gt;Tag 3&lt;/div&gt; &lt;div class="tag"&gt;Tag 4&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The Divs should float with space to both sides (centered). I'm not sure how to explain this any better. Any ideas?</p> <p>thanks!</p> <p><strong>update</strong> The .tag divs must have a flexible width so that varying content fits into them.</p> <p>Also it should be possible to have several tags in one line (if they are short enough)</p> <p>My CSS so far:</p> <pre><code>.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; } </code></pre> <p>My HTML:</p> <pre><code> &lt;div id='tagcloud'&gt; &lt;div class='tag' id='tag_1004'&gt; &lt;img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" /&gt; &lt;span class='name'&gt;&lt;a href="/tags/design"&gt;design&lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class='tag' id='tag_1005'&gt; &lt;img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" /&gt; &lt;span class='name'&gt;&lt;a href="/tags/degeneration"&gt;degeneration&lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class='tag' id='tag_1006'&gt; &lt;img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" /&gt; &lt;span class='name'&gt;&lt;a href="/tags/deggendorf"&gt;deggendorf&lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class='tag' id='tag_1007'&gt; &lt;img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" /&gt; &lt;span class='name'&gt;&lt;a href="/tags/hamburg"&gt;hamburg&lt;/a&gt;&lt;/span&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload