按钮中心 CSS

Question

通常的 CSS 居中问题，只是对我不起作用，问题是我不知道完成的宽度 px

我有一个用于整个导航的 div，然后是里面的每个按钮，当有多个按钮时，它们不再居中。 :(

 .nav {
  margin-top: 167px;
  width: 1024px;
  height: 34px;
}

.nav_button {
  height: 34px;
  margin: 0 auto;
  margin-right: 10px;
  float: left;
}

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

原文由 Stevanicus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我意识到这是一个非常古老的问题，但我今天偶然发现了这个问题并且我得到了它

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

干杯，马克

原文由 markbaldy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

考虑将其添加到您的 CSS 中以解决问题：

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

原文由 Amin 发布，翻译遵循 CC BY-SA 4.0 许可协议