web-dev-qa-db-ja.com

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>
htmlcsstwitter-bootstrapbutton
236
Sam Bates

Buttonをdivで "text-center"クラスでラップします。

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

<!-- 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は削除されました ＃19102m-*-autoを支持して

523
Shekhar Pankaj

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/

34
Seany84
<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>
29
obe6
<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>
8
Alexandre Pereira

あなたのスタイルに加える：

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

7
benjamin

私は以下のコードを試してみました、そしてそれは私のために働きました。

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

ボタンコントロールはdiv内にあり、センターブロッククラスのブートストラップを使用することでボタンをdivの中心に揃えることができました。

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

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

5
Swapneel

あなたはマージンを与えることによって、またはそれらの要素を絶対に配置することによってそれをすることができます。

例えば

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

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

4
user3443160

ブートストラップ4用の更新：

Flexboxを利用するには、 '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>

Flexboxを使用する利点は、同じ軸上に追加の要素/ボタンを追加できることですが、独自の配置を使用できます。また、 'align-items-start/center/end'クラスを使って垂直方向の位置合わせを行う可能性も開かれます。

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

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

2
Chris

text-align: center cssプロパティを使う

2
rsudip90

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

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

それからCSSStyleページに行き、Text-align:centerを次のようにしてください。

#contactBtn{text-align: center;}
1
Mohammad Heydari

次のことができます。ボタンが重ならないようにします。

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

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

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

いくつかのh3行、いくつかのh4行とBootstrapボタンを含む私のdivに。テキストセンターを使用した後、ボタン以外のものはすべて中央にジャンプしたので、BootstrapをオーバーライドしてCSSシートに入り、ボタンに

margin: auto;

これで問題は解決したようです。

0
Ado Moshe

ブートストラップ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>

ブートストラップ4用

BootstrapにはSpacingを使用します。要素の外観を変更するための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>
0
Gonen09