Tengo algunos problemas para crear un encabezado. Aquí , mi ul no está usando la altura completa de la navegación, pero la navegación ESTÁ usando la altura completa del encabezado. Quiero arreglar esto para centrar verticalmente el texto. Gracias.
(editar) Cuando uso height: 100%; en la ul, esto sucede.
Este es mi HTML:
<header> <div class="logo"> <img src="img/logo.png"/> </div> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </header>Este es mi SASS:
$BLACK:#000; $WHITE:#fff; * { box-sizing: border-box; } header { width: 100%; height: 75px; background-color: $BLACK; display: flex; flex-flow: row wrap; justify-content: space-between; .logo { width: 50%; display: flex; align-items: center; padding-left: 50px; } nav { width: 50%; padding-right: 50px; ul { list-style-type: none; display: flex; flex-flow: row wrap; justify-content: right; li { display: inline-block; margin-left:50px; a { text-decoration: none; color: $WHITE; } } } } }Aquí hay una solución para esto. Simplemente agregue line-height: 75px; a los elementos li y establezca el margen del elemento ul en cero agregando margin: 0px; .
* { box-sizing: border-box; } header { width: 100%; height: 75px; background-color: #000; display: flex; flex-flow: row wrap; justify-content: space-between; } header .logo { width: 50%; display: flex; align-items: center; padding-left: 50px; } header nav { width: 50%; padding-right: 50px; } header nav ul { list-style-type: none; display: flex; flex-flow: row wrap; justify-content: right; margin: 0px; } header nav ul li { display: inline-block; margin-left: 50px; line-height: 75px; } header nav ul li a { text-decoration: none; color: #fff; } <header> <div class="logo"> <img src="img/logo.png"/> </div> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </header>Sin embargo, convertí su código SASS en CSS para ejecutarlo en el corredor de fragmentos de código de desbordamiento de pila. Puede cambiar esto a SASS nuevamente si lo desea.
¡Gracias y un saludo!
Probablemente se deba a que no restableció el margen de la etiqueta ul y tampoco le aplicó una altura del 100 %.
$BLACK: #000; $WHITE: #fff; * { box-sizing: border-box; // margin: 0; // padding: 0; } header { width: 100%; height: 75px; background-color: $BLACK; display: flex; flex-flow: row wrap; justify-content: space-between; .logo { width: 50%; display: flex; align-items: center; padding-left: 50px; } nav { width: 50%; padding-right: 50px; background: red; ul { list-style-type: none; display: flex; flex-flow: row wrap; justify-content: right; background: orange; height: 100%; li { display: inline-block; margin-left: 50px; a { text-decoration: none; color: $WHITE; } } } } } <header> <div class="logo"> <img src="https://via.placeholder.com/20x20.png/09f/fff" /> </div> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </header>Actualice su css con el siguiente código:
$BLACK:#000; $WHITE:#fff; * { box-sizing: border-box; } header { width: 100%; height: 75px; background-color: $BLACK; display: flex; flex-flow: row wrap; justify-content: space-between; .logo { width: 50%; display: flex; align-items: center; padding-left: 50px; } nav { width: 50%; padding-right: 50px; height: 100%; display: flex; align-items: center; ul { list-style-type: none; display: flex; flex-flow: row wrap; justify-content: right; flex: 1 0 auto; align-self: stretch; align-items: center; li { display: inline-block; margin-left:50px; a { text-decoration: none; color: $WHITE; } } } } }