Trung tâm Nút CSS

Question

Vấn đề về trung tâm CSS thông thường, không hoạt động đối với tôi, vấn đề là tôi không biết chiều rộng đã hoàn thành px

Tôi có div cho toàn bộ nav và sau đó mỗi nút bên trong, chúng không trung tâm nữa khi có nhiều hơn một nút. :(

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> 

Bất kỳ trợ giúp sẽ được đánh giá rất nhiều. Cảm ơn

---

quả

Nếu chiều rộng là không rõ, tôi đã tìm ra cách trung tâm các nút, không hoàn toàn hạnh phúc nhưng vấn đề doesnt, nó hoạt động: D

Cách tốt nhất là phải đặt nó trong một bảng

<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

Tôi nhận ra đây là một câu hỏi rất cũ, nhưng tôi vấp qua vấn đề này ngày hôm nay và tôi đã nhận được nó để làm việc với

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

Chúc mừng, Đánh dấu

Answer 2

Các vấn đề là với dòng CSS sau trên .nav_button:

margin: 0 auto; 

Điều đó sẽ chỉ làm việc nếu bạn có một nút, đó là lý do tại sao họ đang đi làm trung tâm khi có nhiều hơn một nav_button divs.

Nếu bạn muốn tất cả các nút của bạn làm trung tâm tổ nav_buttons trong một 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> 

Và phong cách nó theo cách này:

.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

khi vẫn thất bại Tôi chỉ

<center> content </center> 

Tôi biết nó không phải là "đạt tiêu chuẩn" nữa, nhưng nếu nó hoạt động nó hoạt động

Answer 4

Một tùy chọn khác tốt đẹp là để sử dụng:

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