Button Center CSS

Übliches Problem mit der CSS-Zentrierung, das bei mir einfach nicht funktioniert. Das Problem ist, dass ich die fertige Breite px nicht kenne

Ich habe ein Div für das gesamte Navi und dann jede Taste im Inneren, sie zentrieren sich nicht mehr, wenn es mehr als eine Taste gibt. :(

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>

Jede Hilfe wäre sehr dankbar. Vielen Dank

Ergebnis

Wenn die Breite unbekannt ist, habe ich einen Weg gefunden, die Tasten zu zentrieren, nicht ganz glücklich, aber egal, es funktioniert: D.

Der beste Weg ist, es in einen Tisch zu legen

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

Mir ist klar, dass dies eine sehr alte Frage ist, aber ich bin heute auf dieses Problem gestoßen und habe es zum Arbeiten gebracht

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

Prost, Mark

Eine weitere gute Option ist:

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

Fügen Sie dies Ihrem CSS hinzu, um das Problem zu beheben:

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

Das Problem liegt in der folgenden CSS-Zeile vor .nav_button:

margin: 0 auto;

Das würde nur funktionieren, wenn Sie einen Knopf hätten. Deshalb sind sie nicht zentriert, wenn es mehr als einen nav_buttonDiv gibt.

Wenn Sie möchten, dass alle Ihre Schaltflächen zentriert sind, verschachteln Sie die nav_buttonsin einem anderen 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>

Und stylen Sie es so:

.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;
}

wenn alles andere scheitert ich gerade

<center> content </center>

Ich weiß, dass es nicht mehr "den Standards entspricht", aber wenn es funktioniert, funktioniert es

Fügen Sie dies Ihrem CSS hinzu, um das Problem zu beheben:

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