Comment centrer un menu horizontal en utilisant uniquement CSS ?

Comment centrer un menu horizontal

Vous avez rencontré des difficultés pour centrer l'alignement d'un menu horizontal, malgré les tentatives de diverses techniques. Ce guide approfondira le problème et fournira une solution éprouvée.

Code HTML et CSS

<div class="topmenu-design">
    <ul></ul>
<pre class="brush:php;toolbar:false">#buttons {
    float: right;
    position: relative;
    left: -50%;
    text-align: left;
}

#buttons ul {
    list-style: none;
    position: relative;
    left: 50%;
}

#buttons li {
    float: left;
    position: relative;
}

#buttons a {
    text-decoration: none;
    margin: 10px;
    background: red;
    float: left;
    border: 2px outset blue;
    color: #fff;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
}

#buttons a:hover {
    border: 2px inset blue;
    color: red;
    background: #f2f2f2;
}

#content {
    overflow: hidden; /* hide horizontal scrollbar*/
}

Solution : Utilisation du flotteur et du positionnement relatif

Le recommandé la solution implique l’utilisation du flotteur et du positionnement relatif. Cette technique consiste à envelopper le menu dans un wrapper flottant positionné hors écran à gauche. Par la suite, les éléments de liste imbriqués sont positionnés dans la direction opposée, les centrant efficacement horizontalement dans le wrapper.

Implémentation

1. Ajoutez la propriété float: right au div parent pour l'aligner à droite de la page.
2. Définir la position : relative et gauche : -50% sur le wrapper pour le décaler de 50% vers la gauche, le provoquant pour chevaucher le contenu en dessous.
3. Contrernez le chevauchement en appliquant position: relative et left: 50% à l'ul.
4. Définissez float: left sur les éléments li pour vous assurer qu'ils flottent à gauche à l'intérieur the ul.
5. Ajoutez des styles pour personnaliser l'apparence du menu, tels que la décoration du texte, les marges et l'arrière-plan couleur.

Considérations supplémentaires

Cette technique maintient le flux de contenu et permet à d'autres éléments d'apparaître sous le menu centré. Contrairement aux solutions JavaScript, cette approche utilise les propriétés CSS, garantissant ainsi la compatibilité avec les anciens navigateurs.