Mitte ausrichten von Schaltflächen innen div dynamisch?

Ich habe ein div, das können 2 oder 4 Tasten, basierend auf unterschiedlichen Szenarien. Ich will die buttons im div werden zentriert ausgerichtet. Wie es getan werden kann. Ich reichte meinen code unten.

<div style="margin: 0 auto; width: 656px;">
    <input type="submit" style="float:left;"  value="Prev"/><input type="reset"  value="Reset" style="float:left;"/>
   <input type="submit"  value="Submit" style="float:left;"/><input style="float:left;" type="submit"  value="Close"/></div>

Das problem ist, es funktioniert, wenn vier Tasten angezeigt bekommt, aber nicht für 3,2 und 1-Knopf-Szenario. Wie Sie center align diese ohne Angabe von Breite ? Plz help.

InformationsquelleAutor OCJP | 2014-02-12
  1. 20

    Müssen Sie text-align: center auf das container-element. Auch, vermeiden Sie die Verwendung inline Stile...

    <div style="margin: 0 auto; width: 656px; text-align: center;">

    Demo

    Hinweis: Stellen Sie sicher, dass Sie text-align: left; wenn Sie irgendwelche text
    innerhalb dieses div sonst werden Sie zentriert, wie gut.

    Als Sie kommentiert, es sieht aus wie die Mitte, um mich

    Mitte ausrichten von Schaltflächen innen div dynamisch?

    Immer noch Sie nicht glauben, dass Sie perfekt zentriert, ich würde zwicken die Container width und zeigen Sie, dass Sie zentriert sind....

    Mitte ausrichten von Schaltflächen innen div dynamisch?

    Mitte ausrichten von Schaltflächen innen div dynamisch?

    Mit 2 Tasten

    Mitte ausrichten von Schaltflächen innen div dynamisch?

    Mitte ausrichten von Schaltflächen innen div dynamisch?

    Hinweis: Stellen Sie sicher, dass Sie das CSS-Reset als auch..., So dass Sie
    einheitliche Stile, die in allen Browsern, obwohl dies sollte zentriert sein
    unabhängig davon, zurücksetzen des styles.

    • Es funktioniert nicht. Das width-Attribut nicht, so dass Sie genau in der Mitte in allen Szenarien.
    • ..und mit zwei Knöpfen jsfiddle.net/eK22Y/1 - @OCJP Was ist das problem? Können Sie ein Szenario, wo es nicht genau in der Mitte? +1.
    • Für die vier-Knopf-Szenario wird es sein, die Mitte, wenn Sie die Taste auf 2 reduziert durch ein dynamisches Szenario, es ist nicht genau das Zentrum.
    • Ich bin ernsthaft nicht das bekommen, was Sie genau möchten 🙂
    • Eigentlich die Tasten innen div wird dynamisch berechnet, so kann es zu Anzeige 1-oder 2-oder 3-oder 4-Knopf-basierend auf einem Szenario. Ich möchte die Schaltfläche zentriert werden, für alle vier Szenario.
    • Damit Sie ZENTRIERT sind, IN ALLEN SZENARIEN
    • Ja ich will es ZENTRIERT werden, IN ALLEN SZENARIEN. wenn Sie überprüfen Sie mit einem Lineal die buttons nicht zentriert, nur die div ist zentriert.
    • Eigentlich habe ich haben geschraubt, die von externen CSS-Auswirkungen auf meinen aktuellen code. Vielen Dank für Ihre Antworten. Kann sein, das ist der Grund, denke ich.
    • Sie begrüßen,:)

    InformationsquelleAutor Mr. Alien
  2. 3

    Wenn Tasten sind das einzige, was in der div ist, dann sollten Sie text-align:center - Eigenschaft der div. Damit ist alles innerhalb des div wird zentriert ausgerichtet, nicht nach der Breite.

    <div style="margin: 0 auto; width: 656px;text-align:center;">
<input type="submit" value="Prev"/><input type="reset" value="Reset"/> 
<input type="submit" value="Submit"/><input type="submit" value="Close"/>
</div>
    InformationsquelleAutor Ankur Aggarwal
  3. 2

    Versuchen Sie dies:

    <div style="width:100%"><div style="margin: 0 auto; text-align: center;">
<input type="submit"  value="One"/><input type="reset"  value="Two"/> <input type="submit"  value="Three"/><input type="reset"  value="Four"/></div></div>

    http://jsfiddle.net/eK22Y/10/

    InformationsquelleAutor user3300937
  4. 1

    Können Sie folgenden code verwenden, und lassen Sie mich wissen. Nur-text-align-Center

    <div style="margin: 0 auto; width: 656px; text-align:center">
<input type="submit"  value="Prev"/><input type="reset"  value="Reset"/>

    • Dieses funktioniert nicht.
    • Das width-Attribut nicht, so dass Sie genau in der Mitte in allen Szenarien.
    • Für mich sieht das Zentrum, selbst wenn ich 1 , 2 oder 3 Tasten
    • Mit dem text-align:center und das hinzufügen einer hintergrund-Farbe - center scheint mir: jsfiddle.net/jennift/eK22Y/2
    • Für die vier-Knopf-Szenario wird es sein, die Mitte, wenn Sie die Taste auf 2 reduziert durch ein dynamisches Szenario, es ist nicht genau das Zentrum.
    InformationsquelleAutor DevelopmentIsMyPassion
  5. 0

    können Sie einfach angeben, text-align:center; style für div.

    Hier der code für Sie Referenz.

    Style
---------------------
.row { text-align:center; }
.row input { margin:0px 5px; }


HTML
------------------
<div class="row">
   <input type="submit"  value="Prev"/><input type="reset"  value="Reset"/>
   <input type="submit"  value="Submit"/><input type="submit"  value="Close"/>
</div>

    jedes element innerhalb des div mit der Klasse "Reihe" wird Mitte ausrichten.

    InformationsquelleAutor Shirish Dhotre
Schreibe einen Kommentar