按钮中心CSS

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

我对整个导航有一个div，然后在其中的每个按钮都使用了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>

我知道它不再“符合标准”，但是如果它起作用了