Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Button Center CSS

Tags:

css

button

center

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> 
like image 857
Stevanicus Avatar asked Sep 01 '10 23:09

Stevanicus


People also ask

How do I center a button in CSS Flex?

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.

How do I center multiple CSS buttons?

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.


1 Answers

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

like image 90
markbaldy Avatar answered Oct 05 '22 23:10

markbaldy