按钮垂直对齐引导程序

用户名

我正在尝试以简单的形式对齐按钮。

我这样做:

<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演示

为此演示添加了一个名为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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

引导程序如何使文本在div容器中垂直对齐

来自分类Dev

引导程序3中的垂直对齐glyphicon

来自分类Dev

使用引导程序3垂直对齐输入

来自分类Dev

在页面上垂直对齐div(使用引导程序?)

来自分类Dev

Twitter引导程序3-垂直对齐列[中间]

来自分类Dev

列引导程序中间的垂直对齐按钮

来自分类Dev

使用引导程序根据图像垂直对齐文本

来自分类Dev

我如何在引导程序中垂直对齐表单?

来自分类Dev

在引导程序中向右拉后垂直对齐

来自分类Dev

在引导程序行中垂直对齐按钮组

来自分类Dev

引导程序。单列的垂直对齐

来自分类Dev

在行引导程序中垂直对齐div

来自分类Dev

在引导程序中垂直对齐标题元素和按钮工具栏

来自分类Dev

引导程序垂直对齐文本以切换按钮

来自分类Dev

垂直对齐引导程序列表项

来自分类Dev

如何使引导程序按钮与文本连续垂直对齐?

来自分类Dev

引导程序3中的垂直对齐glyphicon

来自分类Dev

如何使用引导程序垂直对齐到中间?

来自分类Dev

在引导程序中垂直对齐控件

来自分类Dev

将多个嵌入式单选按钮组与标签垂直对齐(引导程序3)

来自分类Dev

引导网格垂直对齐

来自分类Dev

在引导程序行之间垂直对齐元素

来自分类Dev

在嵌套列的中间垂直对齐内容(引导程序)

来自分类Dev

在引导程序行中垂直对齐按钮组

来自分类Dev

在行引导程序中垂直对齐div

来自分类Dev

使用引导程序类垂直对齐文本框

来自分类Dev

如何使用引导程序垂直对齐不同大小的文本

来自分类Dev

引导程序 4 中的垂直对齐表单元素

来自分类Dev

垂直对齐的引导卡