Przycisk Centrum CSS

Question

Usual problem CSS centrowanie, po prostu nie działa dla mnie, problem jest to, że nie wiem, gotowego szerokość px

Mam div dla całej NAV a następnie każdy przycisk w środku, że nie centrum już wtedy, gdy jest więcej niż jeden przycisk. :(

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> 

Każda pomoc będzie bardzo mile widziane. Dzięki

---

Wynik

Jeżeli szerokość jest nieznany, znalazłem sposób ośrodkiem przyciski, nie do końca zadowolony, ale nie robi względu na to, że działa: D

Najlepszym sposobem jest umieszczenie go w tabeli

<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

Zdaję sobie sprawę, że jest to bardzo stare pytanie, ale potknął przez cały ten problem dzisiaj i mam go do pracy z

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

Pozdrawiam, Mark

Answer 2

problem jest z następującą linią CSS na .nav_button:

margin: 0 auto; 

to będzie działać tylko wtedy, gdy jeden przycisk trzeba było, to dlaczego oni są poza centrum, gdy istnieje więcej niż jeden nav_button DIV.

Jeśli chcesz wszystkie przyciski skupionych gniazdem nav_buttons w innym div:

<div class="nav"> 
    <div class="centerButtons"> 
     <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> 
</div> 

i styl to w ten sposób:

.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; 
} 

Answer 3

gdy wszystko inne zawiedzie Właśnie

<center> content </center> 

wiem, że nie „do normy” więcej, ale jeśli to działa to działa

Answer 4

Kolejną miłą opcją jest użycie:

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