Button Center CSS

Question

Usual CSS centering issue, just not working for me, the problem is that I don't know the finished width px

I have a div for the entire nav and then each button inside, they dont center anymore when there is more than one button. :(

CSS

.nav{     margin-top:167px;     width:1024px;     height:34px; }  .nav_button{     height:34px;     margin:0 auto;     margin-right:10px;     float:left; } 

HTML

<div class="nav">         <div class="nav_button">             <div class="b_left"></div>             <div class="b_middle">Home</div>             <div class="b_right"></div>          </div>         <div class="nav_button">             <div class="b_left"></div>             <div class="b_middle">Contact Us</div>             <div class="b_right"></div>          </div> </div> 

Any help would be greatly appreciated. Thanks

---

Result

If the width is unknown, I did find a way a center the buttons, not entirely happy but doesnt matter, it works :D

The best way is to put it in a table

<table class="nav" align="center">     <tr>       <td>         <div class="nav_button">             <div class="b_left"></div>             <div class="b_middle">Home</div>             <div class="b_right"></div>         </div>          <div class="nav_button">             <div class="b_left"></div>             <div class="b_middle">Contact Us</div>             <div class="b_right"></div>         </div>       </td>     </tr>   </table> 

Answer 1

I realize this is a very old question, but I stumbled across this problem today and I got it to work with

<div style="text-align:center;">     <button>button1</button>     <button>button2</button> </div> 

Cheers, Mark