垂直对齐按钮在列中间 - 引导程序 [英] Vertical align button in the middle of the column- bootstrap

问题描述

我使用引导并尝试垂直对齐列中的按钮。

I am using bootstrap and trying to vertically align the button in the column.

注意：我不能使用flex，也不能根据标准定义高度

Note : I cant use flex and also I can't define height as per standards.

如果我使用边距，它不会在平板电脑和移动设备上工作。

If I use margins it won't work in tablet and mobile devices.

下面是我的代码：

.col-xs-2, .col-xs-6 {
   display: inline-block;
}
.col-xs-2 {
    vertical-align: middle;
     
}

<div class="container">
    <div class="row">
    <div class="col-xs-4">
             <h4>Some really large label that will wrap to multiple lines in small screens</h4>

        </div>
    <div class="col-xs-6">
             <h4>Some really large label that will wrap to multiple lines in small screens</h4>

        </div>
        <div class="col-xs-2">
            <button class="btn" style="color: #660066;"> <i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i>

            </button>
        </div><!-- 
     -->
    </div>
</div>

JS Fiddle链接：

所以我的问题是， 箭头按钮与行中间对齐。

我尝试过： display：table-cell 和 display：inline-block;
似乎无效。我缺少什么？

So my question is how can I make the arrow button align to the middle of the row.
I have tried : display:table-cell and display: inline-block; nothing seems to work. Am I missing something?

推荐答案

工作JS Fiddle ：

CSS更改：

.col-xs-2, .col-xs-6 {
   display: inline-block;
}
.vcenter {
     float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

这篇关于垂直对齐按钮在列中间 - 引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！