Центр кнопок CSS

Звичайна проблема центрування CSS, просто не працює у мене, проблема в тому, що я не знаю готової ширини px

У мене є div для всієї навігації, а потім кожна кнопка всередині, вони більше не центруються, коли є більше однієї кнопки. :(

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>

Будь-яка допомога буде вдячна. Дякую

Результат

Якщо ширина невідома, я знайшов спосіб відцентрувати кнопки, не зовсім задоволений, але не має значення, це працює: D

Найкращий спосіб - це скласти його в таблиці

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

Я розумію, що це дуже давнє запитання, але сьогодні я натрапив на цю проблему і змусив її працювати

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

На ура, Марк

Розгляньте можливість додати це до свого CSS, щоб вирішити проблему:

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

Ще один приємний варіант - використовувати:

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

Проблема полягає в наступному рядку CSS .nav_button:

margin: 0 auto;

Це працювало б лише у випадку, якщо у вас була одна кнопка, тому вони відцентровані, коли існує більше одного nav_buttondiv.

Якщо ви хочете, щоб усі ваші кнопки були зосереджені nav_buttonsв іншому 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>

І оформити це так:

.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, щоб вирішити проблему:

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

коли все інше не вдається, я просто

<center> content </center>

Я знаю, що це вже не "відповідає стандартам", але якщо воно працює, це працює