0

bueno 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.

Hi everyone, well I'm making a responsive bar, but I can't adapt it to mobile devices, the image and font-awesome icons cannot adapt 100%; all the elements of the bar do not center vertically on it, how can I center them vertically? I need help, thanks in advance.

*{
    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 that you have read and understand our privacy policy and code of conduct.

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