列中間的垂直對齊按鈕 - 引導程序

Question

我正在使用引導程序並嘗試垂直對齊列中的按鈕。

注意：我無法使用flex，也無法根據標準定義高度。

如果我使用邊距，它將無法在平板電腦和移動設備上使用。所以下面

是我的代碼：

.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 Link:

所以我的問題是如何使箭頭按鈕對齊到該行的中間。
我試過了：display:table-cell和display: inline-block; 似乎沒什麼可行的。我錯過了什麼嗎？

Answer 1

working JS Fiddle:

CSS變化：

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

Answer 2

借用此問題的不同情況以及此鏈接中提到的源代碼here。

---

檢查我的工作撥弄着不同的媒體支持，以及：here

---

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="row-height"> 
     <div class="col-xs-4 col-height"> 
     <div class="inside"> 
      <div class="content"> 
      <h4>Some really large label that will wrap to multiple lines in small screens</h4> 
      </div> 
     </div> 
     </div> 
     <div class="col-xs-6 col-height col-middle"> 
     <div class="inside"> 
      <div class="content"> 
      <h4>Some really large label that will wrap to multiple lines in small screens</h4> 
      </div> 
     </div> 
     </div> 
     <div class="col-xs-2 col-height col-middle"> 
     <div class="inside"> 
      <div class="content"> 
      <button class="btn" style="color: #660066;"> <i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i> 
      </button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

---

CSS：

個

.inside { 
    background: #ffffff; 
} 
.content { 
    padding: 12px 3px; 
} 
.row-height { 
    display: table; 
    table-layout: fixed; 
    height: 100%; 
    width: 100%; 
} 
.col-height { 
    display: table-cell; 
    float: none; 
    height: 100%; 
} 
.col-top { 
    vertical-align: top; 
} 
.col-middle { 
    vertical-align: middle; 
} 
.col-bottom { 
    vertical-align: bottom; 
} 
@media (min-width: 480px) { 
    .row-xs-height { 
    display: table; 
    table-layout: fixed; 
    height: 100%; 
    width: 100%; 
    } 
    .col-xs-height { 
    display: table-cell; 
    float: none; 
    height: 100%; 
    } 
    .col-xs-top { 
    vertical-align: top; 
    } 
    .col-xs-middle { 
    vertical-align: middle; 
    } 
    .col-xs-bottom { 
    vertical-align: bottom; 
    } 
} 
@media (min-width: 768px) { 
    .row-sm-height { 
    display: table; 
    table-layout: fixed; 
    height: 100%; 
    width: 100%; 
    } 
    .col-sm-height { 
    display: table-cell; 
    float: none; 
    height: 100%; 
    } 
    .col-sm-top { 
    vertical-align: top; 
    } 
    .col-sm-middle { 
    vertical-align: middle; 
    } 
    .col-sm-bottom { 
    vertical-align: bottom; 
    } 
} 
@media (min-width: 992px) { 
    .row-md-height { 
    display: table; 
    table-layout: fixed; 
    height: 100%; 
    width: 100%; 
    } 
    .col-md-height { 
    display: table-cell; 
    float: none; 
    height: 100%; 
    } 
    .col-md-top { 
    vertical-align: top; 
    } 
    .col-md-middle { 
    vertical-align: middle; 
    } 
    .col-md-bottom { 
    vertical-align: bottom; 
    } 
} 
@media (min-width: 1200px) { 
    .row-lg-height { 
    display: table; 
    table-layout: fixed; 
    height: 100%; 
    width: 100%; 
    } 
    .col-lg-height { 
    display: table-cell; 
    float: none; 
    height: 100%; 
    } 
    .col-lg-top { 
    vertical-align: top; 
    } 
    .col-lg-middle { 
    vertical-align: middle; 
    } 
    .col-lg-bottom { 
    vertical-align: bottom; 
    } 
} 
body { 
    padding-bottom: 40px; 
} 
h1 { 
    margin: 40px 0px 20px 0px; 
    color: #95c500; 
    font-size: 28px; 
    line-height: 34px; 
    text-align: center; 
} 
[class*="col-"] { 
    border: none; 
    background: #ffffff; 
} 
html, 
body { 
    width: 100%; 
    height: 100%; 
} 
html { 
    display: table; 
} 
body { 
    display: table-cell; 
    vertical-align: top; 
}