entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Line-height: 100%;

* {
  margin: 0;
  padding: 0;
}
header
    {
    box-sizing: border-box;
    position: fixed;
    z-index: 1000;
    top: 0%;
    width: 100%;
    height: 20%;

    background-color: #5677fc;
    text-align: left;
    text-indent: 35px;
    clear: both;
    }
nav
    {
    box-sizing: border-box;
    position: fixed;
    z-index: 999;
    top: 20%;
    width: 100%;
    line-height: 100%;
    vertical-align: middle;
        background-color:#A9BAFD;
        font-family: "Roboto-Bold";
        font-size: 11px;
        letter-spacing: 1px;
        text-indent: 5px;
    clear: both;
    }

Lo que intento con este código es meter debajo de la cabecera una linea que es donde va el menú, que quede centrado verticalmente, pero no funciona, puesto de esta manera simplemente no aparece el menú, pero por alguna razón que no llego a comprender si modifico el line-height a 3em, entonces si que aparece el menú aun tamaño adecuado, pero el menú actúan de una forma un poco rara, los links no acaban de funciona bien quiero decir están como por debajo del texto.

¿Que estoy haciendo mal? Gracias

0voto

Peter comentado

¿Lo solucionaste con alguna opción?

0voto

bichomen comentado

No, no conseguí solucionarlo, quedan desplazado hacia abajo -->

header {
    box-sizing: border-box;
    position: fixed;
    z-index: 1000;
    top: 0%;
    width: 100%;
    height: 20%;
    background-color: #5677fc;
    text-align: left;
    text-indent: 35px;
    clear: both;
}
header h1 {
    line-height: 10em;
    font-family: Roboto-BoldItalic, helvetica, serif, sans-serif;
    font-size: 18px;
    color: #FFF;
    vertical-align: middle;
}
header h1 strong {
    font-family: "Roboto-Italic", helvetica, serif, sans-serif;
    font-size: 76px;
    color: #FFF;
}

nav {
    box-sizing: border-box;
    position: fixed;
    z-index: 1500;
    top: 20%;
    width: 100%;
    height: 3%;
    line-height: 3em;
    max-height: 3%;
    vertical-align: middle;
    background-color: #A9BAFD;
    font-family: "Roboto-Bold", helvetica, serif, sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-indent: 5px;
    clear: both;
}
nav a:hover {
    background: rgba(86, 119, 252, 0.5);
}
nav ul {
    overflow: auto;
}
nav ul li {
    list-style: none;
    font-size: 90%;
    float: left;
}
nav ul li::before {
    content: "· ";
}
nav ul li:first-child::before {
    content: none;
}

1 Respuesta

1voto

Leonardo-Tadei Puntos227010

Hola @bichomen,

el centrado vertical es un tema más complejo de lo que parece a simple vista, porque depende mucho de los demás elementos de bloque de la página y del contexto de las cosas a centrar.

En este enlace hay 6 maneras de centrar cosas verticalmente, y seguro alguna te servirá para este problema en particular.

La complicación puntual que tenés es que UL no es un elemento de bloque, así que tal vez hasta tengas que envolver todo en un DIV o similar para poder lograrlo. Ya nos contarás!

Saludos cordiales

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta