Databases
StackOverflow2013
Postsdbo
POHow to center align text in navigation bar of website in CSS?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to center align text in navigation bar of website in CSS?
    text
    copied!<p>I am a bit stumped as to how I can center the text on the navigation bar as at the moment it is only going to the left. I have already tried center align but it still continues to stick to the side. If anyone could tell me what error I am making this would be greatly appreciated.</p> <p>HTML:</p> <pre><code>&lt;body&gt; &lt;div id="wrap"&gt; &lt;/div&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Our Products&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;FAQs&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="content"&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>CSS:</p> <pre><code>body { margin: 0; padding: 0; text-align: justify; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; background-color:#425eb4; } *{ margin: 0 auto 0 auto; } #wrap { height:150px; background:url(images/header1.png) no-repeat center; text-align:center; background-color:#FFF; } #nav { width: 100%; float: left; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } #nav li { float: left; text-align:center; } #nav li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; text-align:center; color: #069; border-right: 1px solid #ccc; } #nav li a:hover { color: #c00; text-align:center; background-color: #fff;} /* End navigation bar styling. */ #content { padding: 0 50px 50px; width:1000px; height:800px; background-color:#FFF; } </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