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

Question

Обычная проблема с центрированием 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>

Answer 1

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

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

Cheers, Mark

Answer 2

Еще одним приятным вариантом является использование:

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

Answer 3

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

margin: 0 auto;

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

Если вы хотите, чтобы все ваши кнопки были по центру, вложите nav_buttons в другой делитель:

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

Answer 4

Попробуйте добавить это в свой CSS, чтобы решить проблему:

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

Answer 5

когда ничего не помогает, я просто

<center> content </center>

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