Databases
StackOverflow2013
Postsdbo
POCSS Centering Child Regardless of Padding/Margin
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Centering Child Regardless of Padding/Margin
    text
    copied!<p>Basically, I have this website:</p> <p><a href="http://www.ug.it.usyd.edu.au/~sgre9702/week3/dropDownMenu/semantics.html" rel="nofollow">http://www.ug.it.usyd.edu.au/~sgre9702/week3/dropDownMenu/semantics.html</a></p> <p>I want to centre the drop-down list items on the nav-bar, I know I can centre it with:</p> <pre><code>left:-11px; </code></pre> <p>However, I don't want to use a value I have calculated. Instead I would like it to automatically centre, taking the margin/padding values into consideration. I don't know if this is possible after googling around a bit.</p> <p>My related HTML code is:</p> <pre><code>&lt;nav&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href=""&gt;Tours&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;New South Wales&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Australian Capital Territory&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Queensland&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Western Australia&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Northen Territory&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Tasmania&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;South Australia&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Victoria&lt;/a&gt; &lt;/ul&gt; &lt;li&gt;&lt;a href=""&gt;Attractions&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Food&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Resources&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Online&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Phone&lt;/a&gt; &lt;li&gt;&lt;a href=""&gt;Facimile&lt;/a&gt; &lt;/ul&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>The related CSS:</p> <pre><code>/* general nav list */ nav ul li { background-color: #EEEEEE; border-color: #000000; border-style: solid; border-width: 1px; display: inline-block; margin: 0px 5px; padding: 5px; position: relative; text-align: center; width: 120px; } /* nav sub list */ nav ul li ul { display: none; } /* nav sub list shown */ nav ul li:hover ul { display: block; width: 142px; position: absolute; list-style-type: none; } /* nav sub list shown - list item */ nav ul li:hover ul li { display:block; background-color: #AACCFF; border: solid 1px #000000; position: relative; /*left:-11px;*/ } </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