web-dev-qa-db-ja.com

ボタンセンターCSS

通常の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>
cssbuttoncenter
62
Stevanicus

これは非常に古い質問であることに気づきましたが、今日この問題に出くわしました。

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

乾杯、マーク

159
markbaldy

別の素晴らしいオプションは使用することです：

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

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

margin: 0 auto;

これは、ボタンが1つしかない場合にのみ機能します。そのため、複数のnav_button divがある場合、ボタンは中心から外れています。

すべてのボタンを中央に配置する場合は、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;
}
10
Espresso

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

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

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

<center> content </center>

私はもう「標準に達していない」ことを知っていますが、うまくいけばうまくいきます

1
ott