Home / Questions / 93881
Accepted
Rafael Hernández
Asked: 2020-08-10 07:12:54 +0800 CST 2020-08-10 07:12:54 +0800 CST

Vertically center a span in mobile resolution

  • 772

I have a menu that in mobile resolution the logo sticks to the top of the screen. I've tried several things and I can't get it to center vertically or put it at 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 am using bootstrap .
I have tried with vertical-align:middle, padding-topand with class = "align-bottom"but nothing.

html5

1 Answers

  1. Best Answer

    I think you were missing something from the original Bootstrap 3 menu.

    There you have the menu with paddings. When you put the logo in imgif .navbar-brandthe menu items are too high for you, you can give it an padding-topa ul.navbar-nav.

    Tell me if it works for you or I'll go another way. Thanks.

    https://jsfiddle.net/davidfx/DTcHh/36046/

    • 1