title: How can we centre the div in a div with buttons to its left and right?
body: <p>In my code I am trying to put the arrow buttons to the extreme left and right of the div and the <code>mid</code> div must be in the middle of the div I have seen manny question on this but not getting the proper answer can Anybody help me what exactly the problem is?.</p>
  
  <p>what I want is the <code>mid</code> div can of any size so it is containing the 5 buttons but it may contain more or less that that so how to centre that div so this can be achievable.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#page-nav{
          width:400px;
          border:1px solid;
          height:20px;
  }
      
  #right{
          float:right;
  }
  #mid{
          margin: 0 auto;
          width:auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='page-nav'&gt;
            
    &lt;button id=left&gt;&lt;/button&gt;
          
    &lt;div id="mid"&gt;
      &lt;button&gt;1&lt;/button&gt;
      &lt;button&gt;2&lt;/button&gt;
      &lt;button&gt;3&lt;/button&gt;
      &lt;button&gt;4&lt;/button&gt;
      &lt;button&gt;5&lt;/button&gt;
      
    &lt;/div&gt;
      
    &lt;button id="right"&gt;&lt;/button&gt;
  &lt;/div&gt;
  
  
   </code></pre>
  </div>
  </div>
  </p>