Wie zentriere ich Schaltflächen in Twitter Bootstrap 3?

Ich erstelle ein Formular in Twitter Bootstrap, habe jedoch Probleme beim Zentrieren der Schaltfläche unter der Eingabe im Formular. Ich habe bereits versucht, die center-blockKlasse auf die Schaltfläche anzuwenden , aber das hat nicht funktioniert. Wie soll ich das beheben?

Hier ist mein Code.

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

Wickeln Sie den Button in div mit der Klasse "text-center" ein.

Ändern Sie dies einfach:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

Dazu:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

Bearbeiten

Ab BootstrapV4 , center-blockwurde fallen gelassen # 19102 fürm-*-auto

Laut der Twitter Bootstrap-Dokumentation: http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

Die Klasse center-blockteilt dem Element lediglich mit, dass es einen Rand von 0 auto haben soll, wobei auto der linke / rechte Rand ist. Es sei denn, die Klasse text-center oder css text-align: center; Wenn das Element auf dem übergeordneten Element festgelegt ist, kennt das Element den Punkt, von dem aus diese automatische Berechnung berechnet werden soll, nicht und zentriert sich daher nicht wie erwartet.

Ein Beispiel für den obigen Code finden Sie hier: https://jsfiddle.net/Seany84/2j9pxt1z/

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

Fügen Sie Ihrem Stil hinzu:

Anzeige: Tabelle; Rand: 0 Auto;

<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

Sie können dies tun, indem Sie einen Rand angeben oder diese Elemente absolut positionieren.

Beispielsweise

.button{
  margin:0px auto; //it will center them 
}

0px wird von oben und unten sein und Auto wird von links und rechts sein.

Ich habe den folgenden Code ausprobiert und er hat bei mir funktioniert.

<button class="btn btn-default center-block" type="submit">Button</button>

Die Tastensteuerung befindet sich in einem Div. Durch die Verwendung der Bootstrap-Klasse "Center-Block" konnte ich die Taste an der Mitte des Div ausrichten

Überprüfen Sie den Link, unter dem Sie die Center-Block-Klasse finden

http://getbootstrap.com/css/#helper-classes-center

Verwenden Sie die text-align: centerCSS-Eigenschaft

Update für Bootstrap 4:

Umschließen Sie die Schaltfläche mit einem Div-Set mit den Dienstprogrammklassen "d-flex" und "justify-content-center", um die Vorteile der Flexbox zu nutzen.

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

Der Vorteil der Verwendung von Flexbox besteht darin, dass zusätzliche Elemente / Schaltflächen auf derselben Achse hinzugefügt werden können, jedoch mit einer eigenen separaten Ausrichtung. Es eröffnet auch die Möglichkeit der vertikalen Ausrichtung mit den Klassen 'align-items-start / center / end'.

Sie können das Etikett und die Schaltfläche mit einem anderen Div umschließen, um sie aufeinander auszurichten.

zB https://codepen.io/anon/pen/BJoeRY?editors=1000

Sie können Folgendes tun. Außerdem werden Überlappungen von Schaltflächen vermieden.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

Es funktioniert für mich, wenn ich versuche, einen unabhängigen zu machen und <div>dann das buttonhineinstecke. genau wie dieser :

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

Gehen Sie dann zu Ihrer CSSStyle-Seite und gehen Sie Text-align:centerwie folgt vor:

#contactBtn{text-align: center;}

Für Bootstrap 3

Wir teilen den Raum mit den Spalten, wir verwenden 8 kleine Spalten (col-xs-8), wir lassen 4 leere Spalten (col-xs-offset-4) und wir wenden die Eigenschaft (Mittelblock) an.

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

Für Bootstrap 4

Wir verwenden den Abstand. Bootstrap enthält eine Vielzahl von abgekürzten und aufgefüllten Dienstprogrammklassen für Antwortränder, um das Erscheinungsbild eines Elements zu ändern. Die Klassen werden im Format {Eigenschaft} {Seiten} - {Größe} für xs und {Eigenschaft} {Seiten} - {Haltepunkt} - {Größe} für sm, md, lg und xl benannt.

Weitere Informationen hier: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

Ich hatte dieses Problem. ich benutzte

<div class = "col-xs-8 text-center">

Auf meinem Div mit ein paar h3-Zeilen, ein paar h4-Zeilen und einem Bootstrap-Button. Alles außer der Schaltfläche sprang in die Mitte, nachdem ich Text-Center verwendet hatte, also ging ich in mein CSS-Blatt, das Bootstrap überschrieb, und gab der Schaltfläche ein

margin: auto;

das scheint das Problem gelöst zu haben.

oder Sie können bestimmte Offsets angeben, um die gewünschte Tastenposition einfach mit dem Bootstrap-Grid-System festzulegen.

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

Auf diese Weise können Sie auch die Schaltflächengröße angeben, wenn Sie btn-block festlegen. Sicher, dies funktioniert nur im md-Größenbereich. Wenn Sie auch andere Größen festlegen möchten, verwenden Sie xs, sm, lg.