如何在使用Bootstrap 3網格時垂直居中圖標？

我在垂直居中列表項最後的圖標時遇到問題。如何在使用Bootstrap 3網格時垂直居中圖標？

enter image description here

所以你可以看到我想要垂直居中右箭頭。

我正在使用Bootstrap 3，Angular-UI bootstrap JS和ofc AngularJS。

我當前的代碼是：

<style> 
.center { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 
</style> 

<div class="row"> 
    <div class="col-xs-10"> 
     <div class="row"> 
      <div class="col-xs-10">{{ dn.Var1 }}</div> 
      <div class="col-xs-3">{{ dn.Var2 }}</div> 
      <div class="col-xs-7">{{ dn.Var3 }}</div> 
     </div> 
    </div> 
    <div class="col-xs-2 center"> 
     <div class="row"> 
      <span class="glyphicon glyphicon-chevron-right "></span> 
     </div> 
    </div> 
</div>

任何想法？

來源

2014-02-13 Zoneh

試的line-height：100px的（此行的插入高度） – tschiela

試試這個

<div class="col-xs-2"> 
    <div class="row" > 
    <span class="glyphicon glyphicon-chevron-right col-xs-offset-5" style="padding-top: 50%"> 
    </span> 
</div>

來源

2014-02-13 09:03:57 Arun

可惜，這是不給任何結果。 – Zoneh

你需要爲你的箭頭類添加'padding-top'。 – Arun

謝謝男人:)如果你可以更新你的答案：

這產生了我正在尋找的結果。更新時，我會將其標記爲答案。 – Zoneh

如何在使用Bootstrap 3網格時垂直居中圖標？

回答

相關問題