Trung tâm nút

Vấn đề căn giữa CSS thông thường, chỉ không hoạt động với tôi, vấn đề là tôi không biết chiều rộng px đã hoàn thành

Tôi có một div cho toàn bộ điều hướng và sau đó là từng nút bên trong, chúng không căn giữa 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>

Mọi sự trợ giúp sẽ rất được trân trọng. Cảm ơn

Kết quả

Nếu chiều rộng không xác định, tôi đã tìm cách căn giữa các nút, không hoàn toàn hài lòng nhưng không thành vấn đề, nó hoạt động: D

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

<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>

Tôi nhận ra đây là một câu hỏi rất cũ, nhưng tôi đã tình cờ gặp vấn đề này hôm nay và tôi đã giải quyết

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

Chúc mừng, Mark

Hãy xem xét thêm điều này vào CSS của bạn để giải quyết vấn đề:

button {
    margin: 0 auto;
    display: block;
}

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

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

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

margin: 0 auto;

Điều đó sẽ chỉ hoạt động nếu bạn có một nút, đó là lý do tại sao chúng bị lệch tâm khi có nhiều hơn một nav_buttondiv.

Nếu bạn muốn tất cả các nút của mình được căn giữa nav_buttonsvào trong một div khác:

<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à tạo kiểu 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;
}

Hãy xem xét thêm điều này vào CSS của bạn để giải quyết vấn đề:

.btn {
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;
}

khi mọi thứ khác thất bại, tôi chỉ

<center> content </center>

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