ブートストラップ：行要素を集中させる

Question

私はthisとthis答えを試しました。しかし、私は成功しませんでした：

<div class="container"> 
    <div class="btn-group-vertical"> 
      <div class="row row-eq-height" style="overflow: hidden"> 
       <div class="col-sm-6" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px; 
    padding-bottom: 99999px;"> 
        <button class="btn btn-default">hello</button> 
       </div> 
       <div class="col-sm-6" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px; 
    padding-bottom: 99999px;"> 
        <span class="label label-success" 
            style="font-size: small; vertical-align: iddle;">World</span> 
       </div> 
      </div> 
    </div> 
</div> 

は私がhello要素によって集中さWorldをしたいです。どうすればそれを実現できますか？

Answer 1

与えセンタリングすべきです。

<div class="container"> 
    <div class="form-inline"> 
     <div class="form-group"> 
     <button class="btn btn-default">hello</button> 
     </div> 
     <div class="form-group"> 
     <span class="label label-success">World</span> 
     </div> 
    </div> 
</div> 

http://bootply.com/ZjjHreVVjA

P.S. - btn-group-verticalは、vertical button groupsですが、垂直方向のアラインメントではありません。

Answer 2

this linkをチェックし、オフセットクラスを検索します。各行には12の列があります。 divにcol-sm-6というクラスを指定した場合、divは12個の列のうち6個を取ります。残りの6個の空の列があります。中心にするにはdivを2：3（6/2 = 3）で割った余りでオフセットします。したがって、col-sm-offset-3を上記のdivに追加すると、センターに表示されます。これは、あなたの質問に適用される方法

： は1 divで両方のボタンを入れて、上記の方法を使用してそれを中央に配置します。

編集

あなたはいけない、行要素をセンタリングする方法を尋ねました。 .row要素内に.container要素を追加し、その中に.container列を追加します。col-device-size。ここで

Answer 3

がbootplyです：

.row-eq-height{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

Answer 4

あなたのコード内のカップルのミスがありました：

まず、あなたは、列を持つBTN-グループを囲まれたので、それがあればことを考えると、列を破りました"btn-group"の周りに黒い線を描きましたが、ボタンの外側には輪郭だけが含まれています（行の幅全体ではありません）。将来、btn-groupをボタンの外に置く必要があります（サラウンドカラムではありません）。

すなわち：

<div class = "btn-group"> <button class = "btn btn-default"> </button> <div> 

私は3つのcolsの各列は価値作るためにあなたのブートストラップクラスを変更し、そして右への上に第2の2の「プッシュ」しました。これは、特定のサイズ（大きなサイズのために、あなたはプッシュクラスと以上の列クラスを追加する必要があります）ただ、ブートストラップform-inline ..必要な余分なCSSを使用

   <div class="row row-eq-height" style="overflow:hidden"> 
        <div class="col-sm-3" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px; 
    padding-bottom: 99999px;"> 
         <button class="btn btn-default">hello</button> 
        </div> 
        <div class="col-sm-3 col-sm-push-2" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px; 
    padding-bottom: 99999px;"> 
         <span class="label label-success" 
             style="font-size: small; vertical-align: iddle;">World</span> 
        </div> 
      </div> 
    </div>