Wie zentriere ich Schaltflächen in Twitter Bootstrap 3?

259

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>
Sam Bates
quelle

Antworten:

569

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

Shekhar Pankaj
quelle
1
Funktioniert sogar mit Foundation)
DivideByZero
35

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/

Seany84
quelle
33
<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>
obe6
quelle
Dies ist derjenige, der für mich gearbeitet hat. Ich habe die anderen oben ausprobiert und es würde sich nicht zentrieren.
mjwrazor
Wie mache ich dasselbe mit einem inputElement?
InfZero
8

Fügen Sie Ihrem Stil hinzu:

Anzeige: Tabelle; Rand: 0 Auto;

Benjamin
quelle
5
Ich bin mir nicht sicher, wie Sie zu diesem Schluss gekommen sind.
Fergus
8
<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>
Alexandre Pereira
quelle
2
Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
Ajean
5

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.

user3443160
quelle
5

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

Swapneel
quelle
3

Verwenden Sie die text-align: centerCSS-Eigenschaft

rsudip90
quelle
3

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

Chris
quelle
1

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>
rostig
quelle
1

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;}
Mohammad Heydari
quelle
0

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>
Gonen09
quelle
Während dieses Code-Snippet die Frage möglicherweise löst, hilft eine Erklärung , die Qualität Ihrer Antwort zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
Stefan Crain
0

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.

Ado Moshe
quelle
-2

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.

ugur
quelle