title: Center between two floating divs
body: <p>I've searched around but can't find a solution,</p>
  
  <p>I wrote the following HTML:</p>
  
  <pre><code>&lt;div id="navcontainer"&gt;
      &lt;div class="leftnav"&gt;
          &lt;a href="/blabla.aspx"&gt;Home&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="leftnav"&gt;
          &lt;a href="/blabla.aspx"&gt;test1&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="leftnav"&gt;
          &lt;a href="/blabla.aspx"&gt;test2&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="leftnav"&gt;
          &lt;a href="/blabla.aspx"&gt;test3&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="midnav"&gt;
          &lt;a href="#"&gt;MIDDLE&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="rightnav"&gt;
          &lt;a href="/blabla.aspx"&gt;test5&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="rightnav"&gt;
          &lt;a href="/blabla.aspx"&gt;test6&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With the following CSS:</p>
  
  <pre><code>#navcontainer div.leftnav
  {
      float:left;
      text-align: left;
      vertical-align: middle;
      margin-left:6px;
      margin-top:6px;
  }
  
  #navcontainer div.midnav
  {
      //
      // What do I put here?
      //
  }
  
  #navcontainer div.rightnav
  {
      float:right;
      text-align: left;
      vertical-align: middle;
      margin-right:6px;
      margin-top:6px;
  }
  </code></pre>
  
  <p>I want to center the MIDDLE div based on "navcontainer" but the div keeps getting based on how many 'leftnav' &amp; 'rightnav' divs there are. Can anyone explain to me how to do it?</p>