我正在尝试以简单的形式对齐按钮..
我这样做了:
<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;"但没有用..
最佳答案
我给你做了一个可能的解决方案的例子。它可能需要一些额外的工作,但它显示了总体思路。
jsFiddle Demo
我为此演示添加了一个名为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 */
}
关于twitter-bootstrap - 按钮垂直对齐 Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18949860/