twitter-bootstrap - ボタン垂直整列ブートストラップ

Question

ボタンをシンプルな形に揃えようとしています。

これは私がしました：

<div class="panel panel-default">
          <div class="panel-heading">teste</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-6" style="padding-right:20px; border-right: 1px solid #ccc;">
                       <label class="form-control"> Teste</label>
                        <input type="button" class="form-control btn-danger" value="example" /><br/>
                         <input type="button" class="form-control btn-danger" value="example" /><br/>
                         <input type="button" class="form-control btn-danger" value="example" /><br/>
                         <input type="button" class="form-control btn-danger" value="example" /><br/>
                    </div>
                    <div class="col-lg-6"  style="margin:0 auto;"  >
                            <input type="button"   value="botão" />
                     </div>
                      </div>
            </div>
        </div>

しかし、次の画像に示すように、このボタンを中央に配置したい:

どうやってやるの？div で "style="margin:0 auto;" を使用しましたが、機能しませんでした..

Answer 1

考えられる解決策の例を示しました。追加の作業が必要になる場合がありますが、一般的な考え方を示しています。

jsFiddle デモ

このデモ用に、vertical-containerという新しいクラスを追加しました。

.vertical-container .row {
    display: table;
    width: 100%;
}
.vertical-container .row > .col-lg-6 {
    display: table-cell;
    vertical-align: middle;
    /* float: none;          ~~~~~ Use this setting if needed */
}