Jak wyśrodkować przyciski w Twitterze Bootstrap 3?

Tworzę formularz w programie Bootstrap na Twitterze, ale mam problemy z wyśrodkowaniem przycisku poniżej danych wejściowych w formularzu. Próbowałem już zastosowaćcenter-block klasę do przycisku, ale to nie zadziałało. Jak mam to naprawić?

Oto mój kod.

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

Zawiń przycisk w div klasą „text-center”.

Po prostu zmień to:

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

Do tego:

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

Edytować

Począwszy od BootstrapV4 , center-blockzostał odrzucony na # 19102 na korzyśćm-*-auto

Zgodnie z dokumentacją Twitter Bootstrap: 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>

Cała klasa center-block robi , to powiedzieć elementowi, aby miał margines 0 auto, auto to lewy / prawy margines. Jednakże, chyba że klasa text-center lub css text-align: center; jest ustawiony na elemencie nadrzędnym, element nie zna punktu, od którego należy wykonać to automatyczne obliczanie, więc nie będzie się centrował zgodnie z oczekiwaniami.

Zobacz przykładowy kod powyżej: 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>

dodaj do swojego stylu:

wyświetlacz: stół; margines: 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>

Możesz to zrobić, podając margines lub ustawiając te elementy absolutnie.

Na przykład

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

0px będzie od góry i dołu, a auto będzie od lewej i prawej.

Wypróbowałem następujący kod i zadziałał dla mnie.

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

Sterowanie przyciskami jest w div i użycie klasy bootstrap w środkowym bloku pomogło mi wyrównać przycisk do środka div

Sprawdź link, w którym znajdziesz klasę bloku centralnego

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

użyj text-align: centerwłaściwości css

Aktualizacja Bootstrap 4:

Zawiń przycisk zestawem div za pomocą klas narzędzi „d-flex” i „justify-content-center”, aby skorzystać z Flexboksa.

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

Zaletą korzystania z Flexboksa jest możliwość dodawania dodatkowych elementów / przycisków na tej samej osi, ale z ich osobnym wyrównaniem. Otwiera to również możliwość pionowego wyrównania z klasami „align-items-start / center / end”.

Możesz owinąć etykietę i przycisk innym div, aby utrzymać je w jednej linii.

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

Możesz wykonać następujące czynności. Pozwala to również uniknąć nakładania się przycisków.

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

Działa dla mnie próba uczynienia niezależnego, <div>a następnie włożenie buttonw to. takie jak to :

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

Następnie przejdź do CSSstrony stylu i wykonaj Text-align:centernastępujące czynności:

#contactBtn{text-align: center;}

Dla Bootstrap 3

dzielimy przestrzeń z kolumnami, używamy 8 małych kolumn (col-xs-8), pozostawiamy 4 puste kolumny (col-xs-offset-4) i stosujemy właściwość (blok środkowy)

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

Dla Bootstrap 4

Używamy Odstępów, Bootstrap zawiera szeroki zakres skróconych i wypełnionych klas użyteczności marginesu odpowiedzi do modyfikowania wyglądu elementu. Klasy są nazywane przy użyciu formatu {property} {sides} - {size} dla xs i {property} {side} - {breakpoint} - {size} dla sm, md, lg i xl.

więcej informacji tutaj: 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>

Miałem ten problem. użyłem

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

Na mojej div zawierającej kilka linii h3, kilka linii h4 i przycisk Bootstrap. Wszystko oprócz przycisku przeskoczyło na środek po użyciu centrum tekstowego, więc przeszedłem do arkusza CSS, zastępując Bootstrap i dałem guzikowi

margin: auto;

co wydaje się rozwiązać problem.

lub możesz podać określone przesunięcia, aby ustawić pozycję przycisku w dowolnym miejscu dzięki systemowi siatki ładowania początkowego

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

w ten sposób również określ rozmiar przycisku, jeśli ustawisz blok btn. jasne, będzie to działać tylko w zakresie rozmiarów md, jeśli chcesz ustawić także inne rozmiary, użyj xs, sm, lg.