Выровнять элемент в bootstrap navbar

Question

Я абсолютно аккуратно сложен, пытаясь выровнять элемент в бутстрапе navbar вертикально и на десктопе, и в мобильном режиме. Кто-нибудь может объяснить, как это сделать?

Мне нужно выровнять аватар и имя с правой стороны на десктопе и мобильном телефоне и по центру вертикально на навигационной панели. Здесь HTML код:

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand logo" href="#"><b>Super</b> logo</a> 
     </div> 
     <div class="nav navbar-nav navbar-right"> 
      <ul class="unstyled"> 
       <li> 
        <a href="/profile"> 
         <img class="img-rounded" src="http://lorempixel.com/output/people-q-c-150-150-9.jpg" alt=""> 
         <span class="hidden-xs">User name</span> 
        </a> 
       </li> 
      </ul> 
     </div> 
     <div class="navbar-collapse collapse" id="main-nav"> 
      <ul class="nav navbar-nav visible-xs"> 
       <li><a href="#"><i class="fa fa-tachometer"></i> menu 1</a></li> 
       <li><a href="#"><i class="fa fa-wrench"></i> menu 2</a></li> 
       <li><a href="#"><i class="fa fa-sign-out"></i> menu 3</a></li> 
      </ul> 
     </div> 
     </div></nav> 

и CSS

.navbar-toggle { 
     position: absolute; 
     left: 10px; 
    } 
.logo { 
    width: 100%; 
    padding: 15px 0; 
    text-align: center; 
    height: 20px; 
} 
.img-rounded { 
    height: 35px; 
    width: 35px; 
    border-radius: 50%; 
} 
.unstyled li { 
     list-style: none; 
} 
.unstyled a { 
     text-decoration: none; 
} 
@media only screen and (min-width: 768px) { 
    .logo { 
     width: 150px; 
    } 
} 

Вот неправильно eximple. http://www.bootply.com/zh0J2u4KUU

Answer 1

обновленного использование этого

@media (max-width: 767px) 
{ 
ol, ul{margin-top:6px; margin-right:302px; 
} 


<ul class="unstyled pull-right"> 
<li> 
******* 
</li> 
</ul> 

изменить класс логотипа тянуть правое!