0

Estoy haciendo una barra responsive, pero no logro adaptarla a dispositivos moviles, la imagen y los iconos de font-awesome no logro adaptarlos al 100%; todos los elementos de la barra no se centran verticalmente en ella, ¿como hago para centrarlos de forma vertical? necesito ayuda, gracias de antemano.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

.cabezera{
    width: 100%;
    
}

.imagen-de-cabezera{
    background: url(https://i.imgur.com/NwYzDEc.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
}
.imagen-de-cabezera img{
    width: 70%;
}

#check{
    display: none;
}
nav label{
    display: none;
    font-size: 30px;
}
nav img{
    width: 15%;
    position: relative;
    left: 8%;
    padding: 10px;
}
nav{
    background: yellow;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    width: 100%;
}
nav ul{
    display: inline-flex;
}
nav ul li{
padding: 15px;
}

@media (max-width: 1024px) {
    nav ul{
        display: none;
    }
    nav label{
        display: block;
        float: right;
         z-index: 1;
    }
  #cancel{
  display: none;
  }
    nav{
        display: table;
        overflow: hidden;
    
    }
    nav img{
        width: 18%;
    }
    #check:checked ~ ul{
  display: block;
  position: absolute;
  background: red;
  width: 100%;
  line-height: 12vh;
  height: 100vh;
  text-align: center;
}
#check:checked ~ label #btn{
    display: none;
}
#check:checked ~ label #cancel{
    display: block;

}
}
<script src="https://kit.fontawesome.com/c64e481cc8.js"></script>


<header class="cabezera" >
  <div class="imagen-de-cabezera"><a href="index.html"><img alt="omnilife" src="https://i.imgur.com/UsNjQwg.png" ></a></div>
  </header>

    <nav>
        <input type="checkbox" id="check">
<label for="check">
    <i class="fa fa-bars" id="btn"></i>
    <i class="fa fa-times" id="cancel"></i>
</label>

        <img src="https://i.imgur.com/y93jOzW.png">
        <ul class="menu">
            <li><a href="index.html"><i class="fa fa-home"></i>&nbsp;Inicio</a></li>
            <li><a href="productos omnilife/productos-omnilife.html"><i class="fa fa-shopping-cart"></i>&nbsp;Productos Omnilife</a></li>
            <li><a href="productos seytu/productos-seytu.html"><i class="fa fa-shopping-bag"></i>&nbsp;Productos Seytú</a></li>
            <li><a href=""><i class="fa fa-envelope-open"></i>&nbsp;Contáctame</a></li>
        </ul>
        
      </nav>

1 respuesta 1

0

con flexbox puedes utilizar

display:flex;
justify-content:center;
flex-direction:column;
align-items:center;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.