Button Center CSS

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. :(

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

<div> <div> <div></div> <div>Home</div> <div></div> </div> <div> <div></div> <div>Contact Us</div> <div></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 align="center"> <tr> <td> <div> <div></div> <div>Home</div> <div></div> </div> <div> <div></div> <div>Contact Us</div> <div></div> </div> </td> </tr> </table> 

6 Answers

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

<div> <button>button1</button> <button>button2</button> </div> 

Cheers, Mark

Consider adding this to your CSS to resolve the problem:

button { margin: 0 auto; display: block; } 

Another nice option is to use :

width: 40%; margin-left: 30%; margin-right: 30% 

The problem is with the following CSS line on .nav_button:

margin: 0 auto; 

That would only work if you had one button, that's why they're off-centered when there are more than one nav_button divs.

If you want all your buttons centered nest the nav_buttons in another div:

<div> <div> <div> <div></div> <div>Home</div> <div></div> </div> <div> <div></div> <div>Contact Us</div> <div></div> </div> </div> </div> 

And style it this way:

.nav{ margin-top:167px; width:1024px; height:34px; } /* Centers the div that nests the nav_buttons */ .centerButtons { margin: 0 auto; float: left; } .nav_button{ height:34px; margin-right:10px; float: left; } 

Consider adding this to your CSS to resolve the problem:

.btn { width: 20%; margin-left: 40%; margin-right: 30%; } 

when all else fails I just

<center> content </center> 

I know its not "up to standards" any more, but if it works it works