title: How to center an icon vertically when using Bootstrap 3 grid?
body: <p>I'm having problems with vertical centering an icon at the end of the list item.</p>
  
  <p><img src="https://i.stack.imgur.com/am1Sw.png" alt="enter image description here"></p>
  
  <p>So as you can see i want to vertically centre the right arrow. </p>
  
  <p>I'm using Bootstrap 3, Angular-UI bootstrap JS and ofc AngularJS.</p>
  
  <p>My current code is:</p>
  
  <pre><code>&lt;style&gt;
  .center {
      display: inline-block;
      vertical-align: middle;
      float: none;
  }
  &lt;/style&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-xs-10"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-10"&gt;{{ dn.Var1 }}&lt;/div&gt;
              &lt;div class="col-xs-3"&gt;{{ dn.Var2 }}&lt;/div&gt;
              &lt;div class="col-xs-7"&gt;{{ dn.Var3 }}&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-2 center"&gt;
          &lt;div class="row"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right "&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas?</p>