Vertically center a span in mobile resolution

I have a menu that in mobile resolution the logo sticks to the top of the screen. I have tried several things and I can not center it vertically or put it on the bottom.

<nav class="navbar navbar-custom-1 navbar-fixed-top container col-xs-12" role="navigation">
<!-- El logotipo y el icono que despliega el menú se agrupan
     para mostrarlos mejor en los dispositivos móviles -->
<div class="container">

  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse"
          data-target=".navbar-ex1-collapse">
    <span class="sr-only">Desplegar navegación</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <span id="logo">lorem lorem upse</span>
</div>

<!-- Agrupar los enlaces de navegación, los formularios y cualquier
     otro elemento que se pueda ocultar al minimizar la barra -->
<div id="main-nav" class="collapse navbar-collapse navbar-ex1-collapse">
 <!--  <ul id="main-nav" class="nav navbar-nav  navbar-right"> -->
  <ul  class="nav navbar-nav  navbar-right">
    <li><a  href="#about">BIOGRAFÍA</a></li>
    <li><a  href="#discography">DISCOGRAFÍA</a></li>
    <li><a  href="#videos">VIDEOS</a></li>
    <li><a  href="#contact">CONTACTO</a></li>

  </ul>

</div>
</div>

</nav>


<span id="logo">lorem lorem upse</span>

I'm using bootstrap .
I've tried with vertical-align:middle , padding-top and with class = "align-bottom" but nothing.