Cómo centrar correctamente menú de listas horizontal dentro de nav con css

publicado por: Anonymous

Este es mi código del menú:

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

solución

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

_x000D_

_x000D_

nav > ul {_x000D_
  display: flex;_x000D_
  flex-direction: column;_x000D_
  align-items: center;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

nav > ul {_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
}_x000D_
_x000D_
li {_x000D_
  margin: 0 .75rem;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *