Html centrer verticalement bandeau

Fermé

geronimo3tr Messages postés 1 Date d'inscription vendredi 7 octobre 2022 Statut Membre Dernière intervention 7 octobre 2022 - 7 oct. 2022 à 02:13
Grandasse_ Messages postés 924 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 27 avril 2023 - 19 oct. 2022 à 23:26

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">     

 
    <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%3Aital%2Cwght%401%2C500&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" type="text/css" href="css/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>


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%;    
    }

A voir également:

Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ?
Telecharger whatsapp pour pc - Télécharger - Messagerie
Supercopier 2 - Télécharger - Gestion de fichiers
Gertrude a préparé la liste des affaires à prendre pour l'excursion. juliette a modifié cette liste en utilisant le mode suivi des modifications proposé par le traitement de texte. - Guide
Comment télécharger une vidéo youtube - Guide
Film d'action en français à télécharger - Télécharger - TV & Vidéo

1 réponse

Réponse 1 / 1

Grandasse_ Messages postés 924 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 27 avril 2023 594
19 oct. 2022 à 23:26

Bonjour,

Dans ton .header, il te faut rajouter ça :

.header {
  ...
  display: flex;
  justify-content: center;
}

Discussions similaires

Télécharger musique MP3 gratuitement avec Tubidy

"Nom de l'adresse" lors d'une inscription sur une site

Annuaire portable gratuit à partir d'un nom

"Nom de l'adresse" lors d'une inscription sur une site