title: Button Center CSS
body: <p>Usual CSS centering issue, just not working for me, the problem is that I don't know the finished width px</p>
  <p>I have a div for the entire nav and then each button inside, they dont center anymore when there is more than one button. :(</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav {
    margin-top: 167px;
    width: 1024px;
    height: 34px;
  }
  
  .nav_button {
    height: 34px;
    margin: 0 auto;
    margin-right: 10px;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav"&gt;
    &lt;div class="nav_button"&gt;
      &lt;div class="b_left"&gt;&lt;/div&gt;
      &lt;div class="b_middle"&gt;Home&lt;/div&gt;
      &lt;div class="b_right"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class="nav_button"&gt;
      &lt;div class="b_left"&gt;&lt;/div&gt;
      &lt;div class="b_middle"&gt;Contact Us&lt;/div&gt;
      &lt;div class="b_right"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help would be greatly appreciated. Thanks</p>
  <hr />
  <p><strong>Result</strong></p>
  <p>If the width is unknown, I did find a way a center the buttons, not entirely happy but doesnt matter, it works :D</p>
  <p>The best way is to put it in a table</p>
  <pre><code>&lt;table class=&quot;nav&quot; align=&quot;center&quot;&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div class=&quot;nav_button&quot;&gt;
              &lt;div class=&quot;b_left&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;b_middle&quot;&gt;Home&lt;/div&gt;
              &lt;div class=&quot;b_right&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;nav_button&quot;&gt;
              &lt;div class=&quot;b_left&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;b_middle&quot;&gt;Contact Us&lt;/div&gt;
              &lt;div class=&quot;b_right&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>