按钮中心 CSS

新手上路,请多包涵

通常的 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 许可协议

阅读 713
2 个回答

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

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

干杯,马克

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题