Центр кнопок 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>

Я знаю, что это уже не "до стандартов", но если это работает, то работает