Button Center CSS

83

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

css button center

— Stevanicus
quelle

198

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

— Markbaldy
quelle

Beachten Sie, dass ein anderes Element mit einem Float-Stil rechts / links in der Nähe dieses Elements möglicherweise außermittig erscheint.

— Shlgug

1

Ich vertraue darauf, dass Sie Recht haben, aber gibt es einen Grund, dies nicht einfach zu tun

<input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="{% trans 'ButtonPurpose' %}" />

— RobotHumans

23

Eine weitere gute Option ist:

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

— Rani
quelle

Es funktioniert (und macht Sinn) für Material UI, wenn die Schaltfläche nur eine innerhalb eines<Grid item>...</Grid>

— Juan Salvador

Oh schöne Idee :)

— Martin Volek

23

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

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

— Amin
quelle

4

Beste Antwort. Keine Außenbehälter, (wahrscheinlich) keine Nachteile.

— Konrad Gałęzowski

10

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

— Espresso
quelle

2

danke für deinen Beitrag, funktioniert leider auch nicht, immer noch alle auf der linken Seite.

— Stevanicus

Ja, das habe ich gerade gemerkt. Dies liegt daran, dass die .centerButtons ein Blockelement sind und den gesamten Speicherplatz in .nav einnehmen, wodurch die Randeigenschaften unbrauchbar werden. Ich habe versucht, das Problem zu beheben, indem ich auch .centerButtons schwebte, aber kein Glück.

— Espresso

Ja, ich weiß, dass es schwierig ist, ärgert mich, weil ich es schon einmal gemacht habe, aber ich kann mich nicht erinnern, wie :) .... irgendwelche Ideen?

— Stevanicus

0

wenn alles andere scheitert ich gerade

<center> content </center>

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

— ott
quelle

12

Diese Antwort fügt den anderen Antworten nichts hinzu. <center>wurde in HTML4 veraltet und wird in HTML5 nicht einmal unterstützt, was bedeutet, dass es wahrscheinlich nicht funktioniert, wenn HTML5 verwendet wird.

— Magnilex

1

Ich benutze es nur, wenn ich nichts anderes zum Laufen bringen kann. Ich habe es in Seiten verwendet, auf denen es HTML5 gibt, aber lieber nicht. Ich habe durchgemacht und ersetzt, was ich konnte<div align="center">button</div>

— ott

Veraltetes Tag, es ist eine schlechte Praxis, es zu verwenden

— Sunchock

0

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

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

— Israr Awan
quelle