0

estoy intentando rehacer mi pagina con sass, para un trabajo final que tengo que entregar, y cuando intento centrar el logo y el navbar con flexbox no lo hace, lo estube mirando mucho y no entiendo en que me estaria equivocando, agradezco si alguno logra saber cual es el inconveniente. muchas gracias.

HTML

<header class="header">
            <a href="index.html" ><img src="img/logo.svg" alt="logotipo" class="header__logo"></a>
            <nav class="header__nav" >
                <ul>
                    <li class="select"><a href="index.html"><b>Sobre Mi</b></a></li>
                    <li><a href="conocimientos.html"><b>Conocimientos</b></a></li>
                    <li><a href="proyectos.html"><b>Proyectos</b></a></li>
                    <li><a href="experiencia.html"><b>Experiencia</b> (tabla)</a></li>
                    <li><a href="contacto.html"><b>Contacto</b> (formulario)</a></li>
                </ul>
            </nav>

        </header>

SCSS

.header{
     width: 100%;
     height: 30%;
     background-color:$celeste;
     display: flex;
     flex-direction: column;
     justify-content: center;
}

.header__logo{
    width: 30%;
}

.header__nav{
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
        ul{
            margin:2vh;
            list-style: none;
            li{
                display: inline-block;
                text-decoration: none;
                padding: 3px;
                line-height: 30px;
                color:#000000;
                
                :hover{
                    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
                    transform: rotate(4deg);
                }
                a{
                    text-decoration: none;
                    
                }
            }
        }
}

HEADER

PAGINA

0

1 respuesta 1

0

Si el header es display: Flex;, su contenedor debe ser margin: auto; para que se centre.

.header__logo{
  display: block;
  margin: auto;
  width: 30%;
}
3
  • Ya probe poner en margin: auto, y no, no funciona.
    – FacuFs
    Commented el 23 may. 2021 a las 0:27
  • Entoces agregale display: block;. Con eso creo que bastaría. A mí me funciona bien. Y si aún no te funciona, tal vez tenga otro estilo que lo lo impida ya edite mi respuesta. Commented el 23 may. 2021 a las 0:34
  • Muchas gracias!!!!! me sirvio :D
    – FacuFs
    Commented el 23 may. 2021 a las 1:04

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.