如何在使用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网格时垂直居中图标？

回答

相关问题