1

Este es mi código del menú:

    <nav class="nav">
			<ul>
				<li><a class="menu__link" href="	">Ejemplo</li></a>
				<li><a class="menu__link" href="	">Ejemplo</li></a>
				<li><a class="menu__link" href="	">Ejemplo</li></a>
				<li><a class="menu__link" href="	">Ejemplo</li></a>
				<li><a class="menu__link" href="	">Ejemplo</li></a>
			</ul>
		</nav>

2
  • ¿qué has intentado para centralas?
    – Shaz
    Commented el 23 mar. 2018 a las 14:46
  • Te recomiendo usar Flexbox Commented el 23 mar. 2018 a las 15:44

2 respuestas 2

4

Se puede lograr con flexbox, estableciendo <ul> como su contenedor, fijando la dirección en columnas y centrando su eje no principal.

nav > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<nav class="nav">
        <ul>
            <li><a class="menu__link" href="#">Ejemplo</a></li>
            <li><a class="menu__link" href="#">Ejemplo</a></li>
            <li><a class="menu__link" href="#">Ejemplo</a></li>
            <li><a class="menu__link" href="#">Ejemplo</a></li>
            <li><a class="menu__link" href="#">Ejemplo</a></li>
        </ul>
    </nav>

Si la idea es centrar la lista y que sus elementos estén en un layout "horizontal", es más fácil aún:

nav > ul {
  display: flex;
  justify-content: center;
}

li {
  margin: 0 .75rem;
}
<nav class="nav">
        <ul>
            <li><a class="menu__link" href="#">Ejemplo</a></li>
            <li><a class="menu__link" href="#">Ejemplo</a></li>
            <li><a class="menu__link" href="#">Ejemplo</a></li>
            <li><a class="menu__link" href="#">Ejemplo</a></li>
            <li><a class="menu__link" href="#">Ejemplo</a></li>
        </ul>
    </nav>

8
  • ¿Porque al poner display: flex se ponen directamente en horizontal? Commented el 23 mar. 2018 a las 17:34
  • 2
    Porque el valor por defecto de flex-direction es row.
    – Shaz
    Commented el 23 mar. 2018 a las 17:40
  • 2
    Es verdad, se me había olvidado por completo. Iba a poner una solución con display: inline-block pero ahora que flexbox es soportado por todos los navegadores... Que le den a IE!! Commented el 23 mar. 2018 a las 17:48
  • Yo colocaba display: inline-block para ponerlas horizontal y luego usaba float para centrar las li y no podía.
    – Camilo
    Commented el 23 mar. 2018 a las 18:12
  • @Camilo ¿te sirvió la respuesta?
    – Shaz
    Commented el 24 mar. 2018 a las 1:47
1

Revisa esta parte:

.container {
 clear:both;
 float:left;
 overflow:hidden;
 width:100%;
}

#menu {
 float:left;
 left:50%;
 list-style-type:none;
 margin:0 auto;
 padding:0;
 position:relative;
}

#menu li {
 float:left;
 position:relative;
 right:50%;
}
<div class="cointainer">
    <nav class="nav">
        <ul id="menu">
            <li><a class="menu__link" href="#">Ejemplo</li></a>
            <li><a class="menu__link" href="#">Ejemplo</li></a>
            <li><a class="menu__link" href="#">Ejemplo</li></a>
            <li><a class="menu__link" href="#">Ejemplo</li></a>
            <li><a class="menu__link" href="#">Ejemplo</li></a>
        </ul>
    </nav>
</div>

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.