Twitter Bootstrap 3でボタンを中央に配置する方法は？

Twitter Bootstrapでフォームを作成していますが、フォームの入力の下にボタンを中央に配置することに問題があります。私はすでにcenter-blockボタンにクラスを適用しようとしましたが、それはうまくいきませんでした。どうすれば修正できますか？

これが私のコードです。

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

「text-center」クラスを使用して、ボタンをdivでラップします。

これを変更するだけです：

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

これに：

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

編集する

とおりBootstrapV4、center-blockドロップされた＃19102の賛成でm-*-auto

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>

全クラス center-blockが行うことは、要素に0 autoのマージンを持たせることです。autoは左/右マージンです。ただし、クラスtext-centerまたはcss text-align：centerを除きます。が親に設定されている場合、要素はこの自動計算を実行するポイントを認識しないため、期待どおりに中央に配置されません。

上記のコードの例をここで参照してください：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>

あなたのスタイルに追加：

表示：テーブル; マージン：0自動;

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

マージンを与えるか、これらの要素を絶対的に配置することで、それを行うことができます。

例えば

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

0pxは上と下から、autoは左と右からになります。

次のコードを試してみましたが、うまくいきました。

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

ボタンコントロールはdiv内にあり、ブートストラップの中央ブロッククラスを使用すると、ボタンをdivの中央に配置するのに役立ちました

センターブロックのクラスを見つけるリンクをチェックしてください

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

text-align: centercssプロパティを使用する

Bootstrap 4の更新：

「d-flex」および「justify-content-center」ユーティリティクラスを使用してボタンをdivセットでラップし、フレックスボックスを利用します。

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

フレックスボックスを使用する利点は、同じ軸に追加の要素/ボタンを追加できることですが、独自の個別の配置があります。また、 'align-items-start / center / end'クラスとの垂直方向の整列の可能性も開きます。

ラベルとボタンを別のdivでラップして、それらを互いに整列させておくことができます。

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

次のことができます。また、ボタンの重複も回避されます。

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

それは私が独立を作って<div>それをそれに入れようとする私にとってはうまくbuttonいきます。ちょうどこのような ：

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

次に、CSSスタイルページに移動して、次のText-align:centerようにします。

#contactBtn{text-align: center;}

Bootstrap 3の場合

列でスペースを分割し、8つの小さな列（col-xs-8）を使用し、4つの空の列（col-xs-offset-4）を残して、プロパティ（center-block）を適用します

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

Bootstrap 4の場合

私たちは間隔を使用します。Bootstrapには、要素の外観を変更するために、さまざまな省略および埋め込み応答マージンユーティリティクラスが含まれています。クラスは、xsの場合は{property} {sides}-{size}の形式で、sm、md、lg、xlの場合は{property} {sides}-{breakpoint}-{size}の形式で名前が付けられます。

詳細はこちら：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>

私はこの問題を抱えていました。使った

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

いくつかのh3行、2つのh4行、およびBootstrapボタンを含むdivに。text-centerを使用した後、ボタン以外のすべてが中央にジャンプしたので、Bootstrapを上書きしてCSSシートに移動し、ボタンに

margin: auto;

問題を解決したようです。

または、特定のオフセットを指定して、ブートストラップグリッドシステムを使用してボタンの位置を簡単に設定できます。

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

このように、btn-blockを設定する場合は、ボタンサイズも指定できます。確かに、これはmdサイズの範囲でのみ機能します。他のサイズも設定する場合は、xs、sm、lgを使用します。