Menu horizontal en UL et LI centré en CSS

Pour obtenir un menu en liste à puces (éléments UL/LI) centré horizontalement via CSS, utilisez ce code:

DEMO

HTML5

Apposez le code suivant où vous souhaitez placer votre menu horizontal:

<nav>
	<ul>
		<li><a href="#">Lien un</a></li>
		<li><a href="#">Lien deux</a></li>
		<li><a href="#">Lien trois</a></li>
	</ul>
</nav>

NOTE: le document doit être en HTML5 pour utiliser l’élément sémantique nav.

CSS

nav {
    float: right;
    left: -50%;
    position: relative;
}
ul { 
	list-style-type: none; 
	padding: 0px; 
	margin: 0px;
	left: 50%;
	position: relative;
}
ul li {
	display: block;
	float: left;
	padding: 0px 10px;
	margin: 0px;
}

2 Commentaires

  1. Erica says:

    « Truc du vendredi – en appliquant uniquement du CSS aux tags NAV, UL et LI, on peut centrer horizontalement un menu – et ce, SANS margin: auto!! »

    Est-ce qu’il y a une contre-indication à utiliser la balise margin auto?

    • chevalier says:

      Bonjour,

      Non, sauf que l’utilisation d’un margin: auto suppose qu’une largeur doit être donnée au UL (ou NAV).

      Dans le cas où le menu possède sa propre largeur dynamique (donc: NON-assignée – exemple: le même code réutilisé pour les libellés en français et le penchant anglais) ce code permet de ne pas se soucier d’un width défini.

      Aussi, l’ajout ou le retrait d’items de menu n’engendrera pas de travail additionnel dans le CSS (modifier la largeur)

Laissez un commentaire