縦の中央にあるブートストラップ3ボタン

Question

私のボタンが縦になっていない理由を理解するのに時間を費やしました。私は何かが欠けていると思ってここで質問しました。

<div class="container"> 
    <div class="row"> 
     <div class="sellthem"> 
      <div class="col-sm-8 col-sm-offset-1"> 
       <div class="sellContent"> 
        <h1 class="sellHeader">Bacon ipsum dolor amet fatback turkey filet mignon</h1> 
        <h4 class="sellText">Bacon ipsum dolor amet fatback turkey filet mignon ham T-bone alcatra drumstick tenderloin strip steak meatball. Rump picanha chicken beef sausage tri-tip</h4> 
       </div> 
      </div> 
      <div class="col-sm-2 sendThem"> 
       <button type="button" class="btn btn-lg btn-block">Sign Up</button> 
      </div> 
     </div> 
    </div> 
</div> 

h1とh4タグ内のテキストは、その高さが変化する可能性があり、私は列col-sm-2内のボタンを中央にしたいと思い変わります。 buttonsのBootstrapのドキュメントを調べたところ、垂直方向のセンタリングに関して何も言及されていません。

私はSO私はHow can I center vertically a bootstrap class button?間で実行が、それは200px、answerの強制高さを使用して検索する場合：

div#container { 
    height: 200px; 
    border: solid 2px green; text-align:center; 
    line-height:200px; 
} 
input#verticalButton { 
    vertical-align: middle; 
} 

さらなる研究、How to center buttons in Twitter Bootstrap 3?はcenter-blockことを示唆しているが、それは、水平方向のセンタリングのためであると私は垂直方向のセンタリングをしたいです。

さらに、私がしようとしたとき、私はbutton vertical align bootstrap渡って走ったが、ウサギの穴ダウン：

HTML：

<div class="sendThem"> 
    <div class="col-sm-2"> 
     <button type="button" class="btn btn-lg btn-block">Sign Up</button> 
    </div> 
</div> 

はCSS：

.sendThem { 
    display:table; 
} 
.sendThem .col-sm-2 { 
    display:table-cell; 
    vertical-align:middle; 
    float:none;  
} 

私の結果は同じであるとし、それは上部のボタンです。私は、どこか読んでどこかに列によって引き起こされる問題があるかもしれないと思ったが、私はその文書を見つけることができないと思った。

ので、私はこのような何かを得ることができ、垂直HTMLとCSSでボタンを中央にする適切な方法は何

：

は私が設定した高さを使用することを計画していなかったし、そしてcol-sm以下のもの全幅中央のボタンになる予定でした。 Bootplyボタンを垂直方向に中央に配置しようとしています。

Answer 1

さてあなたはこのコードを使用することができます：

.sellthem { 
    display: flex; 
    align-items: center; 
} 

@media only screen and (max-width : 768px) { 
    .sellthem { 
     display: block; 
    } 
} 

がこのハックのようなものです（あなたがそのコードベースを上書きしている）ので、それがあるため、この問題を解決するための最良の方法ではないことを考慮してくださいブートストラップは、グリッドシステムの垂直方向の配置をサポートしていません（確かではありませんが、新しいバージョンでは垂直方向の配置が可能です）。

注：あなたがサポートしているすべてのブラウザでこの解決策を確認してください。

2つの可能な解決方法は、フレックスボックスに基づく別のグリッドシステムを使用することも、このシナリオのスタイルを自分で作成することもできます。あなただけの次のように記述することができ、それは同じように動作するはず

UPDATE

：

@media only screen and (min-width : 768px) { 
    .sellthem { 
     display: flex; 
     align-items: center; 
    } 
}