我正在尝试以简单的形式对齐按钮。
我这样做:
<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;”,但没有用。
我为您提供了可能解决方案的示例。它可能需要一些额外的工作,但它显示了总体思路。
我为此演示添加了一个名为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 */
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句