Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I center a dynamic div?
    primarykey
    data
    text
    <p>I'm not sure if this question has been answered (I think it probably has), but how do you center this dynamic div?</p> <p>(I want <code>#two</code> to align itself to the middle position of <code>#one</code>.)</p> <p>Right now my jsFiddle does this: <a href="http://jsfiddle.net/sE8Sc/4/" rel="nofollow noreferrer">http://jsfiddle.net/sE8Sc/4/</a></p> <p><strong>HTML :</strong></p> <pre><code>&lt;div id="one"&gt; &lt;/div&gt; &lt;div id="two"&gt; &lt;a class="stuff"&gt;a&lt;/a&gt; &lt;a class="stuff"&gt;b&lt;/a&gt; &lt;a class="stuff"&gt;c&lt;/a&gt; &lt;/div&gt; </code></pre> <p><strong>CSS :</strong></p> <pre><code>#one { width:100%; height:200px; background-color:#222; float:left; } #two { text-align:center; float:left; } .stuff { width:20px; height:20px; background-color:#444; margin:0 5px; float:left; } </code></pre> <p>I've tried <code>margin:0 auto;</code>, <code>text-align:center;</code> but still no dice. I'm not looking at declaring a defined <code>margin</code> like <code>margin:0 41%;</code> because if I wanted to add another <code>&lt;a class="stuff"&gt;</code> to the list it would get out of position...</p> <p>Anyone? This is probably some simple positioning error that I can't figure out.</p> <p>EDIT : I was looking around, and I saw this demo by Nivo Slider -- <a href="http://demo.dev7studios.com/nivo-slider/" rel="nofollow noreferrer">http://demo.dev7studios.com/nivo-slider/</a> -- how is it defining itself with a 960px width?</p> <p><img src="https://i.stack.imgur.com/Re8ns.png" alt="centered div"></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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