Struggling with vertical centering an icon at the end of a list item.
The goal is to vertically center the right arrow on the page.
Using Bootstrap 3, Angular-UI bootstrap JS, and AngularJS.
Current code snippet:
<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>
Looking for ideas and suggestions.