按钮垂直对齐引导程序
[英] button vertical align bootstrap
本文介绍了按钮垂直对齐引导程序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试以简单的形式对齐按钮..
我这样做了:
<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">测试</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 class="col-lg-6" style="margin:0 auto;"><input type="button" value="botão"/>
但我希望此按钮居中,如下图所示:
我该怎么做?我在 div 上使用了 "style="margin:0 auto;" 但没有用..
解决方案
我已经为您提供了一个可能的解决方案示例.它可能需要一些额外的工作,但它显示了总体思路.
jsFiddle 演示
我为此演示添加了一个名为 vertical-container 的新类.
.vertical-container .row {显示:表;宽度:100%;}.vertical-container .row >.col-lg-6 {显示:表格单元格;垂直对齐:中间;/* 浮动:无;~~~~~ 如果需要,请使用此设置 */}
I'm trying to align a button in a simple form..
I did this:
<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>
but I want this button to be centered as shown in the following image:
how can i do that? i used "style="margin:0 auto;" on div but didn't work..
解决方案
I've made you an example of a possible solution. It may need some extra work but it shows the general idea.
jsFiddle Demo
I've added a new class called vertical-container for this demo.
.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 */
}
这篇关于按钮垂直对齐引导程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!