ボタンセンターCSS

通常のCSSセンタリングの問題は、私には機能しません。問題は、完成した幅のピクセルがわからないことです。

ナビゲーション全体の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;
}

もう1つの優れたオプションは、次を使用することです。

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

問題は、次のCSS行にあり.nav_buttonます。

margin: 0 auto;

これは、ボタンが1つしかない場合にのみ機能します。そのため、複数の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;
}

問題を解決するには、これをCSSに追加することを検討してください。

.btn {
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;
}

他のすべてが失敗したとき私はただ

<center> content </center>

私はそれがもはや「標準に達していない」ことを知っていますが、それが機能すればそれは機能します