Question

* {
  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

Comments

¿Lo solucionaste con alguna opción?

---

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;
}

Answer 1

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