title: Aligning text in the horizontally and vertically in the center in html/css
body: <p>I am needing to vertically and horizontally align the text to the center of the nav div.
  I will provide both the HTML and CSS down below.</p>
  
  <p>Here is the HTML portion of the code.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;title&gt;
  Dom Chronicles
  &lt;/title&gt;
  &lt;body&gt;
  
  &lt;div id="header"&gt;
  &lt;/div&gt;
  
  &lt;div id="space"&gt;
  &lt;/div&gt;
  
  &lt;div id="nav"&gt;
  
  &lt;ul&gt;
      &lt;li&gt;Home&lt;/li&gt;
      &lt;li&gt;Music&lt;/li&gt;
      &lt;li&gt;Blog&lt;/li&gt;
      &lt;li&gt;Shop&lt;/li&gt;
      &lt;li&gt;Contact&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the CSS portion of the code.</p>
  
  <pre><code>@font-face  {
  font-family: Mager;
  src: url(fonts/ElegantLux-Mager.otf);
   }
  
  #header     {
  width: 1000px;
  height: 400px;
  margin: 0 auto;
  background-color: gray;
  }
  
  #space  {
  width: 1000px;
  height: 10px;
  }
  
  #nav    {
  width: 1000px;
  height: 50px;
  margin: 0 auto;
  background-color: gray;
  color: black;
  font-size: 25px;
  font-family: Mager;
  }
  
  #nav li {
  list-style: none;
  display: inline;
  text-align: center;
  }
  
  #nav li:hover   {
  opacity: .6;
  }
  </code></pre>