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   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    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    lt table class  nav  align  center  gt       lt tr gt         lt td 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  td gt       lt  tr gt     lt  table gt

User · Answer

Consider adding this to your CSS to resolve the problem    btn     width  20     margin-left  40     margin-right  30

User · Answer

Consider adding this to your CSS to resolve the problem   button       margin  0 auto      display  block

User · Answer

I realize this is a very old question  but I stumbled across this problem today and I got it to work with    lt div style  text-align center   gt       lt button gt button1 lt  button gt       lt button gt button2 lt  button gt   lt  div gt    Cheers  Mark

User · Answer

Another nice option is to use    width  40   margin-left  30   margin-right  30

User · Answer

when all else fails I just   lt center gt  content  lt  center gt    I know its not  up to standards  any more  but if it works it works

User · Answer

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    lt div class  nav  gt       lt div class  centerButtons  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   lt  div gt    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

[css] Button Center CSS

Examples related to css

Examples related to button

Examples related to center