webentwicklung-frage-antwort-db.com.de

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 wird jeder Knopf drinnen nicht mehr zentriert, wenn es mehr als einen Knopf 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, um 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>
63
Stevanicus

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

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

Prost, Mark

166
markbaldy

Eine weitere Option von Nice ist die Verwendung von:

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

Das Problem ist mit der folgenden CSS-Zeile auf .nav_button:

margin: 0 auto;

Das würde nur funktionieren, wenn Sie eine Schaltfläche hätten. Deshalb sind sie nicht zentriert, wenn mehr als ein nav_button - Div vorhanden ist.

Wenn Sie möchten, dass alle Schaltflächen zentriert sind, verschachteln Sie den nav_buttons In 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 gestalte 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;
}
10
Espresso

Erwägen Sie, dies zu Ihrem CSS hinzuzufügen, um das Problem zu beheben:

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

wenn alles andere scheitert ich eben

<center> content </center>

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

1
ott