Comment centrer la navigation sur la page à l'aide de la liste ul ?

Question

以下是HTML et CSS代码

.nav{
    largeur : 100 % ;
    hauteur : 100 % ;
    poste : fixe ;
    couleur de fond : blanc ;
    débordement caché;

}

.menu un{
    remplissage : 30 px ;
    la couleur noire;
    alignement du texte : centre ;
    gauche : 0 ;
    marge : 0 automatique ;
    flexion : aucune ;
    affichage : flexible ;
    aligner les éléments : centre ;
    justifier-contenu : centre ;
}</pré>
<pre class="brush:html;toolbar:false;"><nav class="nav">
            <ul class="menu">
                <li><a href="#">Google Store</a></li>
                <li><a href="#">Recherche Google</a> ≪/li>
                <li><a href="#">Spotify</a></li>
                <li><a href="#">Blog Spotify</a></li>
                <li><a href="#">Espace carré</a></li>
                <li><a href="#">Autres travaux</a></li>
            </ul>
        </nav>

Answer 1

Vous devez appliquer les propriétés flexbox au conteneur contenant l'élément, et non à l'élément lui-même.

.nav {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: white;
    display: flex;
    align-items: center; 
    justify-content: center;  
}

.menu {
    list-style-type: none;
    padding: 0;
}

.menu a {
    padding: 30px;
    color: black;
    text-align: center;
    text-decoration: none;
}

<nav class="nav">
            <ul class="menu">
                <li><a href="#">Google Store</a></li>
                <li><a href="#">Google Search</a> </li>
                <li><a href="#">Spotify</a></li>
                <li><a href="#">Spotify Blog</a></li>
                <li><a href="#">Squarespace</a></li>
                <li><a href="#">Other work</a></li>
            </ul>
        </nav>

Cela centrera votre ul horizontalement et verticalement dans le conteneur .nav.