title: How to make bootstrap badge vertically center aligned?
body: <p>Here is the jsfiddle.
  <a href="https://jsfiddle.net/8mfr1x79/1/" rel="nofollow">https://jsfiddle.net/8mfr1x79/1/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="list-group"&gt;
          &lt;a class="lis-group-item" href="#"&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus. &lt;span class="badge badge-default pull-right"&gt;A long badge&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there any easy way so that whole text of the "a" element on the left gets adjusted towards a little left so that the badge aligns vertically in center?</p>
  
  <p>I can give fixed width to the content on left, but I am concerned about all device sizes.</p>
  
  <p>Thanks in advance.</p>