How to make a centered label under the text in bootstrap navbar - css

Question

I have a bootstrap navbar like follows
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><i class="fa fa-upload"></i>link1</li>
<li>link2</li>
<li><i class="fa fa-random"></i>link3<span class="label label-info">1</span></li>
</ul>
</div>
Current scenerio looks like follows
Is it possible the 1 bubble is directly under the text buy sell online...Currently its even going out of the navbar

Answer 1

So that it didn't interfere with the flow, on small viewports the element is position absolute, that's because the link in the navbar is a block and I didn't want to mess with it. On larger viewports, it centers below the text. Needs a wrapper to do this.
Demo: http://jsbin.com/gozumi/1/
HTML
<header class="navbar navbar-static-top navbar-default" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand Name
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><i class="fa fa-upload"></i> link1</li>
<li>link2</li>
<li><i class="fa fa-random"></i> Some Words Go Here<span class="label-wrap"><span class="label label-info">1</span></span></li>
</ul>
</nav>
</div>
</header>
CSS
.navbar-nav .label-wrap {
position: absolute;
right: 15px;
top: 8px;
height: 10px;
}
#media (min-width:768px) {
.navbar-nav .label-wrap {
clear: both;
float: left;
height:auto;
position: static;
width: 100%;
text-align: center;
margin-top: -10px;
padding-bottom: 10px;
}
}

Answer 2

it's simple!
put your label inside your ancor:
from:
<li><i class="fa fa-random"></i>link3<span class="label label-info">1</span></li>
to:
<li><i class="fa fa-random"></i>link3 <span class="label label-info">1</span></li>
http://jsfiddle.net/cfvbea19/