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;”，但没有起作用...

- user2568768

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 */
}

- Itay

---

为什么我们需要 float:none;？ - myusuf

我们不需要。已更新。谢谢！ - Itay

@myusuf @Itay 我实际上不得不添加 float: none。否则，Chrome 会将 display 属性视为 block 而不是 table-cell。我正在使用 Bootstrap 3.3.5。 - philippe_b

@philippe_b 谢谢。我猜这取决于Bootstrap的版本。我重新编辑了我的答案。 - Itay