Exemples détaillés de cinq méthodes en CSS pour réaliser un centrage horizontal des menus de navigation

Dans la conception Web, les menus de navigation horizontaux sont largement utilisés. Dans les styles CSS, nous utilisons généralement des éléments Float ou "display:inline-block" pour le résoudre. Aujourd'hui, nous expliquerons principalement comment centrer des éléments de largeur inconnue. Nous énumérerons ci-dessous plusieurs méthodes pour résoudre le problème du centrage horizontal. Bien entendu, ces méthodes ne sont pas nécessairement utilisées pour résoudre des problèmes de menu de navigation, et peuvent également être utilisées dans d’autres situations similaires.

Plusieurs méthodes pour centrer horizontalement les menus de navigation CSS :

• Méthode 1 : display:inline-block

• Méthode 2 : position:relative

• Méthode 3 : display:table

• Méthode 4 : display:inline-flex

• Méthode 5 : width:fit-content / width:intrinsic

Méthode 1 : display:inline-block

Cette méthode est relativement simple, il s'agit de convertir le conteneur Convertissez-le en élément de niveau bloc en ligne « display:inline-block », puis utilisez directement « text-align:center » pour obtenir l'effet de centrage horizontal.

Code HTML :

Ici nous avons besoin d'un p pour entourer le menu de navigation.

<p class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</p>

Code CSS :

Ajoutez "text-align:center" au p externe, puis définissez le conteneur de menu sur "display:inline-block " Éléments de niveau bloc en ligne, menu flottant à gauche "float:left"

.navbar {
    text-align:center;
}
.navbar ul {
    display:inline-block;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

Le navigateur ici n'est compatible qu'avec IE8 ou supérieur, donc si vous souhaitez être compatible avec IE7, veuillez ajouter le code suivant

.navbar ul {
    display:inline;
    zoom:1;
}

Méthode 2 : position:relative

Il s'agit d'utiliser la méthode de positionnement "position:relative" pour centrer l'élément horizontalement. Je ne recommande pas beaucoup cette méthode, car. le code a un p supplémentaire pour l'envelopper. Bien sûr, ceux-ci sont utilisés en fonction de la situation.

Code HTML :

<p class="navbar">
    <p>
        <ul>
            <li><a href="/">首页</a></li>
            …
        </ul>
    </p>
</p>

Code CSS :
Réglez le positionnement p sur flottant, puis positionnez "left:50 % ", puis accédez à "left:-50%". Cette méthode est très intéressante. Peut-être que l'expression n'est pas très claire, lisez simplement le code vous-même ^^

.navbar {
    overflow:hidden;
}
.navbar > p {
    position:relative;
    left:50%;
    float:left;
}
.navbar ul {
    position:relative;
    left:-50%;
    float:left;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

Si vous souhaitez être compatible avec IE7, veuillez ajouter le style suivant :

.navbar {
    position:relative;
}

Méthode 3 : display:table

Si vous aimez le code concis, alors cette méthode est parfaite pour vous.

Code HTML :

<ul class="navbar">
    <li><a href="/">Home</a></li>
    …
</ul>

Code CSS :

.navbar {
    display:table;
    margin:0 auto;
}
.navbar li {
    display:table-cell;
}
.navbar li + li {
    padding-left:20px;
}

Compatibilité navigateur : Cette méthode simplifie le code, mais ne prend pas en charge IE7 et versions antérieures...

Méthode 4 : display:inline-flex

Vérifiez vous-même vos connaissances sur la mise en page flexible>_<

Code HTML :

<p class="navbar">
    <ul>
        <li><a href="/">Home</a></li>
        …
    </ul>
</p>

Code CSS :

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

Compatibilité des navigateurs : Est-ce que ne prend pas en charge les navigateurs IE de IE7 et inférieurs.

Méthode 5 : width:fit-content

Code HTML :

<p class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</p>

Code CSS :

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

Compatibilité des navigateurs : Cette compatibilité est relativement faible et ne prend en charge que les navigateurs les plus récents tels que Firefox, Chrome et Opera 12.

Écrit à la fin : Méthode 1 : display:inline-block est simple et facile à comprendre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!