Forum : Centrer lien dans mon bandeau

Bonjour je n'arrive pas a centrer verticalement mes liens dans mon bandeau si quelqu'un peut m'aider merci bien je vous souhaite une bonne journée.

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">                          
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>         
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">     

    <!--font-family: 'Montserrat', sans-serif;-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,500&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="style.css">  
    <title>Relooking</title>
    <style type="text/css"> 
        a:link 
        { 
         text-decoration:none; 
        } 
</style>           

    <body>

    <nav>
       <ul>
        <div class="header">
            <div class="logo"><img class="logoImage"  src="img/logo.jpg" alt="French Relooking" /> </div>
            <li class="menu"><a class="boutonlien" href="RelookFrance.html">Accueil </a>
            <li class="menu"><a class="boutonlien">Relooking Personnelle</a>
                <ul class="sous" >
                    <li><a href="html/relookinghomme.html">Relooking Homme</a></li>
                    <li><a href="html/relookingfemme.html">Relooking Femme</a></li>
                    <li><a href="html/relookingenfant.html">Relooking Enfant</a></li>
        </ul>
        </li>
        <li class="menu"><a class="boutonlien">Relooking Professionnel</a>
            <ul class="sous" >
                <li><a href="index.html">Relooking Homme</a></li>
                <li><a href="index.html">Relooking Femme</a></li>
               </ul>
        </li>
        <li class="menu"><a class="boutonlien">Formation</a>
            <ul class="sous" >
                <li><a href="html/formationintensive.html">Formation Intensive</a></li>
                <li><a href="html/formationadistance.html">Formation à Distance</a></li>
               </ul>
        </li>
        <li class="menu"><a class="boutonlien" href="html/boutique.html">Boutique</a>
        </li>
        <li class="menu"><a class="boutonlien">Aide</a>
            <ul class="sous" >
                <li><a href="html/contact.html">Nous Contacter</a></li>
                <li><a href="html/coachs.html">Nos Coachs</a></li>
               </ul>
               <li class="menu"><a class="boutonlien" href="html/forum;html">Forum</a>
                </li>

        </nav>
    </div>

    </body>
</html>

Pour le css

*{
  margin: 0px;
  padding: 0px;

}
.logo{
  float: left;       
}
nav{
  width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0px;
}
nav ul{
  list-style-type: none;
}
nav ul li{
  float: left;
  width: 10%;    
  text-align: center;
  position: relative;
}
nav ul::after{
  content: "";
  display: table;
  clear: both;
}

nav a{
  display: block;
  text-decoration: none;
  color: black;
  border-bottom: 2px solid transparent;
  padding: 10px 0px;
}

nav a:hover{
  color: purple;
  border-bottom: 2px solid purple;
}

.sous{
  display: none;
  box-shadow: 0px 1px 2px #CCC;
  background-color: white;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

nav > ul li:hover .sous{
  display: block;
}

.sous li{
  float: none;
  width: 100%;
  text-align: left;
}

.sous a{
  padding: 10px;
  border-bottom: none;
}
.sous a:hover{
  border-bottom: none;
  background-color: RGBa(200,200,200,0.1);
}

.header{
  width:100%;
  height: 255px;
  top: 80px;
  font-family: 'Montserrat', sans-serif;
  color:white;
  background-color: black;
   }

   .boutonlien{
  color:white;
   font-size: 125%;    
    }

Ce que je veux

je cherche a centrer verticalement mes different liens accueil aide boutique etc...

Ce que j'obtiens

j'ai esseyer avec line-height mais cela ne fonctionne pas

popotte

Hello, alors pour ça faudrait utiliser soit flexbox soit grid

Pour flexbox:

.parent {
    display: flex;
    justify-content: center; /* Tant qu'à faire autant aligner horizontalement aussi :p */
    align-items: center;
}

Line height ça peut fonctionner aussi mais il faut utiliser un padding aussi, sinon quand l'utilisateuur va selectionner le texte ça aura unu comportement bizarre ^^'

geronimo4tr

Auteur

merci pour la réponse j'ai créé la class parent apres la class logo dans le html puit mit le code dans le css cela fonctionne j'ai enfin quelque chose de plus propre merci pour votre aide ;)

Centrer lien dans mon bandeau

2 réponses