Menu
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> 
857
To center a button with a flexbox, you should do 2 things: first, add display: flex to a button's parent element so that you'll activate flexbox features. then add justify-content: center so that the button will be centered.
Sometimes you might want to have two buttons next to each other, but to center both together on the page. You can achieve this by wrapping both buttons in a parent <div> and using flexbox to center them on the page. Notice that we also added margin-right: 20px to the first button, in order to add space between them.
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
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
