Note that there are some explanatory texts on larger screens.

plurals
  1. POCenter CSS menu vertically and horizontally on page
    primarykey
    data
    text
    <p>On the first page of my site, I just want to have the navigation menu centered vertically and horizontally on the page. I've tried a bunch of different approaches and this is the closest I've come. </p> <p>I'm not sure how to center links 1 through 4 horizontally and I'm also not positive the menu is really centered vertically in the blue box.</p> <p>(Also, this is not the actual color scheme. I have the colored backgrounds added to show the boundaries of each element.)</p> <p>Here is the HTML:</p> <pre><code>&lt;body&gt; &lt;div id="centered"&gt; &lt;ul&gt; &lt;li&gt;&lt;h1&gt;&lt;a href="link1.html"&gt;LINK1&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt; &lt;li&gt;&lt;h1&gt;&lt;a href="link2.html"&gt;LINK2&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt; &lt;li&gt;&lt;h1&gt;&lt;a href="link3.html"&gt;LINK3&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt; &lt;li&gt;&lt;h1&gt;&lt;a href="link4.html"&gt;LINK4&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>And the CSS:</p> <pre><code>html, body { background-color: black; height: 100%; margin: 0; padding: 0; color: white; text-align: center; } a { text-decoration: none; color: #fff; } h1 { font-size: 1.5em; color: #000; } #centered { border: solid black; background-color: blue; height: 20%; width: 100%; position: absolute; top: 40%; } #centered ul { list-style-type:none; margin:0; padding:0; } #centered li { float:left; display:inline; } </code></pre> <p>Demo here: <a href="http://jsfiddle.net/chassen2/n84ey/" rel="nofollow">http://jsfiddle.net/chassen2/n84ey/</a></p>
    singulars
    1. This table or related slice is empty.
    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.
    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