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

Ответы

Ответ 1

Я понимаю, что это очень старый вопрос, но сегодня я наткнулся на эту проблему, и я получил ее для работы с

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

Cheers, Марк

Ответ 2

Другим приятным вариантом является использование:

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

Ответ 3

Проблема заключается в следующей строке CSS на .nav_button:

margin: 0 auto;

Это будет работать только в том случае, если у вас есть одна кнопка, поэтому они не центрированы, когда есть более чем один div nav_button.

Если вы хотите, чтобы все ваши кнопки центрировали гнездо 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;
}

Ответ 4

когда все остальное не работает, я просто

<center> content </center>

Я знаю его не "до стандартов", но если он работает, он работает

Ответ 5

Кажется, это трюк для меня.

position:relative;
text-align: center;

Надеюсь, что поможет